Created: 17/05/2011
By: Jarrod Oberto
Email: codecanyon@oberto.co.nz
Thank you for purchasing my image library. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
To get setup and ready to use Image Tools with BMP Support, simply copy the image_lib folder from the ZIP archive you downloaded into the root folder of your project folder.
Usage of Image Tools with BMP Support is simple: You open your image, perform some actions, and then save your image. Each one of these steps requires just a single line of PHP code.
Here are the detailed steps:
include('image_lib/image_lib_class.php');
Note: If you put your image_lib folder in a different location than shown above, you will need to change the path accordingly.
$imageLibObj = new imageLib('path/to_image.jpg');
Be sure to change "path/to_image.jpg" to the path and name of your image.
Below is a very basic example of an action used for demonstration. It resizes you image to 200px by 200px. For a complete list of actions and their usage, please see the Actions section of this document.
$imageLibObj -> resizeImage(200, 200);
A noteworthy feature of Image Tools with BMP Support is that you can apply multiple actions to your image by simply listing each action one after the other. This is also referred to as "stacking."
You may have noticed the file we opened was of jpg file type, and we're saving the file as a png. This is absolutely fine. We can save the image to a number of different image types, should we wish.
The second parameter allows us to set the quality of the saved file from 0 - 100. 100 being the best. This only applies to image types that support the quality setting - that being jpg and png files. If you choose another type, such as gif or bmp, this parameter will simply be ignored.
$imageLibObj -> saveImage('path/to_image.png', 100);
Another noteworthy feature of Image Tools with BMP Support is the ability to convert images from one image type to another. Best of all, this is done by simply setting the extension to the desired file type. Be sure to check out our Supported Image Types section - we boast more supported image types than similar libraries on the CodeCanyon store!
And that's all there is to it! Below is an image to show you a little summary of what was just covered. Be sure to check out the Actions section below which is full of examples and other nice things!
The resize method allows you to resize your images in a variety of ways, depending on your needs. Firstly, you can resize an image to an exact width and height. This is useful if you know the original image ratio, otherwise distortion will occur.
A solution to preventing distortion is to use one of the clever resizing options such as landscape or portrait. The landscape option will resize the image to the width you specify and the height will be calculated automatically to maintain the image proportions. The Portrait option is the same but it's the height you specify that is used while the width is calculated.
But what if the image is uploaded by a user and we don't know if it's landscape or portrait? We've thought of that, too! auto mode will determine the images orientation and resize the image appropriately using either landscape or portrait automatically.
The last option in our bag of tricks is the crop option. This will resize the image as close as it can to the size you specified, while still maintaining the aspect ratio, then crop the rest. This is extremely useful for creating images, such as thumbnails, that are all the same size and don't have distortion!
Option | Description |
---|---|
0 or exact (default) | Defined size. Will use the exact height and width dimensions you set |
1 or portrait | Keep aspect. The height you set will be used. The width will be calculated and set automatically to a value that retains the aspect ratio. |
2 or landscape | Keep aspect. The width you set will be used. The Height will be calculated and set automatically to a value that retains the aspect ratio. |
3 or auto | Determine best option. Depending whether the image is landscape or portrait, this will automatically determine whether to resize via 'exact', 'portrait', or 'landscape'. This is useful when you have no control over whether the image to be resized will be landscape or portrait. |
4 or crop | Resize and crop. Will resize the image and then crop the image for the best fit, making the image the exact size you specify. |
$imageLibObj -> resizeImage($width, $height, $option = 0, $sharpen = false)
$imageLibObj -> resizeImage(100, 200, 'exact');
$imageLibObj -> resizeImage(100, 200, 'crop');
$imageLibObj -> resizeImage(100, 200, 'landscape');
$imageLibObj -> resizeImage(100, 200, 'true');
A new feature as of version 1.4 is the ability to select the crop position. Previously, this defaulted to the center of the image.
To do this, you need to pass the crop resize option as an array. The first element being the crop option, the second being the crop position.
Here is an example:
$imageLibObj -> resizeImage(100, 200, array('crop', 'tl'));
tl stands for "top-left". After the image has been resized, the crop position will not be the top left corner. See the table below for other values.
As of version 1.5 this became a bit simpler by, instead of passing an array with the option, you can pass a hyphenated string. The first part of the string is "crop" followed by the position which is separated by a hyphen.
Here is an example:
$imageLibObj -> resizeImage(100, 200, 'crop-tl');
The above two examples are both valid and will produce the same result.
shortcode | Description |
---|---|
tl | top left |
t | top (middle). |
tr | top right. |
l | left |
m | middle (image center) |
r | right |
bl | bottom left |
b | bottom (middle) |
br | bottom right |
auto (v1.5) | If the image is landscape, the image will be cropped in the center. If the image is portrait, the image will be cropped 10% (default) from the top
of the image. This is useful when the images are of people as their heads are usually in the top portion of the photo.
You can change the percentage from the top with the setCropFromTop() method. E.G., setCropFromTop(20); |
As of v1.5 you can apply a crop to an image without having to resize it first.
$imageLibObj -> cropImage($width, $height, $cropPos = 'm');
To apply a vintage look:
$imageLibObj -> vintage();
$imageLibObj -> vintage();
Note: For best results use an image 950 x 650px or smaller.
There are 3 greyscale effects that can be applied. The first is the basic stock standard GD greyscale, the second is an enhanced version adding in some contrast. And lastly there is the dramatic greyscale effect.
Greyscale basic$imageLibObj -> greyScale();Greyscale enhanced
$imageLibObj -> greyScaleEnhanced();Greyscale dramatic
$imageLibObj -> greyScaleDramatic();
$imageLibObj -> greyScale();
$imageLibObj -> greyScaleEnhanced();
$imageLibObj -> greyScaleDramatic();
Note: With Greyscale dramatic use an image 950 x 650px or smaller for best results.
To apply a sepia look:
$imageLibObj -> sepia();
$imageLibObj -> sepia();
To turn your image black & white:
$imageLibObj -> blackAndWhite();
$imageLibObj -> blackAndWhite();
To turn your image into a negative:
$imageLibObj -> negative();
$imageLibObj -> negative();
value | Description |
---|---|
left | Rotates image left, or 90 degrees, clockwise. |
right | Rotates image right, or 270 degrees, clockwise. |
upside | Rotates image upside down, or 180 degrees clockwise. |
0 - 360 | Specify an exact amount in degrees to rotate your image in a clockwise direction. |
$imageLibObj -> rotate($direction = '90', $color = 'transparent');
$imageLibObj -> rotate('left');
$imageLibObj -> rotate(200);
$imageLibObj -> rotate(75, '#EFEC34');
Image Tools with BMP Support provides you with some powerful techniques to watermark your digital images, without sacrificing ease of use.
For example, Image Tools with BMP Support can apply opacity to your image* on the fly!
Another great feature is the ability to use shortcodes to place the watermark image. E.G., "tr" will place your watermark image in the top right corner of the original image. This is very useful if your batch processing images of different sizes and you want your watermark image in the same position on every image. This in conjunction with the padding parameter, you can get your watermark to sit nicely where ever you please!
*This feature requires the watermark image to be a png file.
shortcode | Description |
---|---|
tl | top left |
t | top (middle). |
tr | top right. |
l | left |
m | middle (image center) |
r | right |
bl | bottom left |
b | bottom (middle) |
br | bottom right |
value | Description |
---|---|
[x] x [y] (eg "40 x 30") | Position the watermark (from the top left corder) x number of pixels in from the left, and y number of pixels from the top. In the example it would be 40 pixels in and 30 pixels down. |
$imageLibObj -> addWatermark($watermarkImage, $position, $padding = 0, $opacity = 100);
$imageLibObj -> addWatermark('sample_images/bear.png', 'br');
$imageLibObj -> addWatermark('sample_images/bear.png', 'br', 30);
$imageLibObj -> addWatermark('sample_images/bear.png', '20 x 30', 0, 30);
Add text to your image, wheather it be your copyright or just your name. Select a custom font, size, color, and even the angle.
shortcode | Description |
---|---|
tl | top left |
t | top (middle). |
tr | top right. |
l | left |
m | middle (image center) |
r | right |
bl | bottom left |
b | bottom (middle) |
br | bottom right |
value | Description |
---|---|
[x] x [y] (eg "40 x 30") | Position the text (from the top left corder) x number of pixels in from the left, and y number of pixels from the top. In the example it would be 40 pixels in and 30 pixels down. |
$imageLibObj -> addText($text, $position = '20x20', $padding = 0, $fontColor='#fff', $fontSize = 12, $angle = 0, $font = null);
$imageLibObj -> addText('test', 't', 10);
$imageLibObj -> addText('test', '250x145', 0, '#ccc', 18, 25, 'image_lib/fonts/Pacifico.ttf');
$imageLibObj -> addBorder($thickness = 1, $color = array(255, 255, 255));
$imageLibObj -> addBorder(5, '#CE6E00');
$imageLibObj -> addReflection($reflectionHeight = 50, $startingTransparency = 30, $inside = false, $bgColor = '#fff', $stretch=false);
$imageLibObj -> addReflection(75, 30, true, '#000', true);
$imageLibObj -> addReflection(75, 10, false, '#fff', false);
$imageLibObj -> roundCorners($radius = 15, $bgColor = 'transparent');
$imageLibObj -> roundCorners(5, 'transparent');
$imageLibObj -> roundCorners(15, '#000D71');
$imageLibObj -> roundCorners(30, 'transparent');
$imageLibObj -> addShadow($shadowAngle=45, $blur=15, $bgColor='transparent');
$imageLibObj -> addShadow(45, 15)
$imageLibObj -> addShadow(0, 30);
shortcode | Description |
---|---|
t | top |
r | right side |
b | bottom |
l | left side |
$imageLibObj -> addCaptionBox($side='b', $thickness=50, $padding=0, $bgColor='#000', $transaprencyAmount=30);
$imageLibObj -> addCaptionBox('b', 45, 0, '#fff', 60);
$imageLibObj -> addText('Racecar 2000', 'b', 16, '#000');
$imageLibObj -> addCaptionBox('l', 100, 0, '#000', 20); $imageLibObj -> addText('First', '30x135', 0, '#fff', 16, 20, 'image_lib/fonts/Pacifico.ttf'); $imageLibObj -> addText('1', '25x30', 0, '#fff', 80, 0);
$imageLibObj -> addCaptionBox('t', 40, 0, '#E18B00', 25); $imageLibObj -> addCaptionBox('r', 40, 20, '#B40000', 45);
After adding a caption box, you're probably going to want to add the caption, right? This method is similar to addText() except it automatically centers the text within in the last caption box you added.
$imageLibObj -> addTextToCaptionBox($text, $fontColor='#fff', $fontSize=12, $angle=0, $font=null)
Here we add a caption box then add some text by calling addTextToCaptionBox. The text is automatically centered within the caption box.
$imageLibObj -> addCaptionBox('t', 40, 0, '#E18B00', 25);
$imageLibObj -> addTextToCaptionBox('this is my text');
A neat feature of Image Tools with BMP Support is the ability to "stack" multiple actions. That is, you can apply many transformations to the same image simply by calling the desired action one after the other.
The below image was created using the following actions.
<?php include('image_lib/image_lib_class.php'); // *** Open image $imageLibObj = new imageLib('sample_images/racecar.jpg'); /* * Stacked actions */ // *** Resize image $imageLibObj -> resizeImage(200, 200, 'crop'); // *** Add greyscale $imageLibObj -> greyScaleDramatic(); // *** Add white border $imageLibObj -> addBorder(25, '#fff'); // *** Add black border $imageLibObj -> addBorder(5, '#000'); // *** Add white border $imageLibObj -> addBorder(1, '#fff'); // *** Add watermark (bottom, 40px from boarder, 50% opacity) $imageLibObj -> addWatermark('sample_images/bear.png', 'tr', 30, 20); // *** Add text $imageLibObj -> addText('Racer', 'b', 10, '#000', 10); // *** Save image $imageLibObj -> saveImage('output.png', 100); ?>
We've also made it possible to extract the EXIF metadata from your digital photos. This works in a similar manner to applying actions; the big differences are that you do not need to call the save method; and your result is returned as an array. Don't worry, it's still very easy to use and the full code is included in the example below.
$exifArray = $imageLibObj -> getExif();
Make | Canon |
Model | Canon EOS 500D |
Date | 2010:12:22 15:03:35 |
Exposure | 1/400 sec. |
Aperture | 3 EV |
F-stop | f/2.8 |
F-number | 28/10 |
F-number value | 2.8 |
ISO | 100 |
Focal length | 50.0 mm |
Exposure program | aperture priority |
Metering mode | pattern |
Flash status | flash did not fire, compulsory flash mode |
Creator | |
Copyright |
include('image_lib/image_lib_class.php'); $imageLibObj = new imageLib('sample_images/zoe.jpg'); $exifArray = $imageLibObj -> getExif(); // *** Array values assigned to variables $make = $exifArray['make']; $model = $exifArray['model']; $date = $exifArray['date']; $exposure_time = $exifArray['exposure time']; $aperture_value = $exifArray['aperture value']; $f_stop = $exifArray['f-stop']; $fnumber = $exifArray['fnumber']; $fnumber_value = $exifArray['fnumber value']; $iso = $exifArray['iso']; $focal_length = $exifArray['focal length']; $exposure_program = $exifArray['exposure program']; $metering_mode = $exifArray['metering mode']; $flash_status = $exifArray['flash status']; $creator = $exifArray['creator']; $copyright = $exifArray['copyright'];
Say you upload an image and you want to resize this image to 3 different sizes and save the results. Calling reset() after each resize/save will reset the image to it original form so you can resize it again, or apply an action.
// *** Open image $imageLibObj = new imageLib('sample_images/racecar.jpg'); // *** Resize and add a border to the first copy $imageLibObj -> resizeImage(300, 200, 'crop'); $imageLibObj -> addBorder(5, '#f0f0f0'); $imageLibObj -> saveImage('output_15.1_a.png', 100); $imageLibObj->reset(); # resets the image resource // *** Resize and add a border to the second copy $imageLibObj -> resizeImage(200, 100, 'crop'); $imageLibObj -> addBorder(5, '#333'); $imageLibObj -> saveImage('output_15.1_b.png', 100); $imageLibObj->reset(); # resets the image resource // *** Resize and add a border to the third copy $imageLibObj -> resizeImage(200, 200, 'crop'); $imageLibObj -> addBorder(5, '#333'); $imageLibObj -> saveImage('output_15.1_c.png', 100);See demo: 15.1_chaining_(reset).php
By staking various actions, namely the border action, you can create some nice looking borders. Border presets are a way of storing those combinations of actions and using them over and over again, easily.
$imageLibObj -> borderPreset('[preset name]');
Note: Border presets are intended for thumbnail sized images. (but that does not mean you couldn't use them for large images, either)
$imageLibObj -> borderPreset('simple');
Batch Resize is our tool for when you need to resize a folder of images easily. The process is very similar to manipulating a single image so it's pretty easy stuff.
include('image_lib/image_batch_class.php');
Note: If you put your image_lib folder in a different location than shown above, you will need to change the path accordingly.
$batchObj = new imageBatch('path/to_folder');
Note: You can supply a second parameter to filter particular file types. This parameter can be an array of image types or a comma separated string. Use whatever you're comfortable with. See the Filter image type example.
Below is a very basic example of an action used for demonstration. It resizes all your images in the specified folder to 200px by 200px (assuming no filter has been set). For a complete list of actions and their usage, please see the Actions section of this document.
$batchObj -> resizeImage(200, 200);
A noteworthy feature of Image Tools with BMP Support is that you can apply multiple actions to your image by simply listing each action one after the other. This is also referred to as "stacking."
The second parameter set the image quality (0-100, 100 being the best).
$batchObj -> save('path/to_folder', 100);
Note: You can also convert all the image to specific file type like jpg, regardless what the source file type is by passing in a third parameter of the desired type. E.G., 'jpg'. See the Convert image type example.
This example will only resize images that are png's or gif's
require_once('image_lib/image_batch_class.php');
$batchObj = new imageBatch('sample_images', 'png, gif');
$batchObj -> resizeImage(150, 100, 'crop');
$batchObj -> save('output_folder', 100);
This example will only resize images that are bmp's and save them as a jpg file type
require_once('image_lib/image_batch_class.php');
$batchObj = new imageBatch('sample_images', 'bmp');
$batchObj -> resizeImage(150, 100, 'crop');
$batchObj -> save('output_folder', 100, 'jpg');
Dynamic URI's is a great way to automatically create thumbnails on the fly - no need to upload multiple sizes of your images anymore! Best of all, you can still apply your favorite actions to your thumbnails!
Below is an example showing you how to do a basic resize. We'll use this as our example to show you each component that makes up our dynamic URL.
<img src="image_lib/thumb.php?src=images/racecar.jpg&w=150&h=100" alt="" >
As mentioned, dynamic URI's can use the full power of our standard Image Tools. This includes all the resize options, filters, and transformations. The next example will show you how to include a resize option.
<img src="image_lib/thumb.php?src=images/racecar.jpg&w=150&h=100&type=crop" alt="" >
Notice the "&type=crop"? That's telling the script to use the resize crop option. All resize options are supported including "exact" (default), "portrait", "landscape", and "auto". See the resizing section for more information.
The &actions tag is used to specify actions. You can call any of the available actions by simply calling the action name followed by parentheses. This example will add a border to your thumbnail image.
<img src="image_lib/thumb.php?src=images/racecar.jpg&w=150&h=100&type=crop&actions=addBorder(); >
To find out more about actions, see the Actions sections.
To include multiple action we simply chain them together with a semi-colon (;)
<.../thumb.php?src=images/racecar.jpg&w=150&h=100&type=crop&actions=addBorder();addShadow(); >
This example will add a border and then apply a shadow to our thumbnail image. Remember to check the Actions section to see what other effects can be applied!
Some actions allow you to pass some settings such as a color to tailor an effect. No worries, we got you covered.
Using the previous example, lets add some settings.
<...?src=images/racecar.jpg&w=150&h=100&type=crop&actions=addBorder(3,FF0000);addShadow(45); >
Now our thumbnail will have a red (FF0000), 3px thick border with a 45 degree shadow.
New in v1.4 is the ability to select where to set the crop position. This is done with &pos followed by the position: r=right, l=left, t=top, etc. See Resize With the Crop Option for more information.
<img src="image_lib/thumb.php?src=images/racecar.jpg&w=150&h=100&type=crop&pos=r" alt="" >
There are a few thing to note in the above example. Because we're passing this information through the URI there are a couple syntax differences. These are listed below:
The upload class gives you the ability to effortlessly upload your images and then apply some processing.
The example I'm about to cover will just be on the code specifically to deal with the upload. For a real life example be sure to check out the demo file 14.1_upload.php . This covers form submission and any errors returned, etc.
Here, I'll begin by discussing each piece of code and then give you the complete code at the end. Also be sure to check out the demo!
include('image_lib/upload_class.php');
Note: If you put your image_lib folder in a different location than shown above, you will need to change the path accordingly.
$formInputName = 'img-upload'; $savePath = 'output3'; $saveName = 'test'; $allowedExtArray = array('.jpg', '.png', '.gif', '.bmp'); $imageQuality = 100;
$uploadObj = new imageUpload($formInputName, $savePath, $saveName, $allowedExtArray);
$uploadObj -> resizeImage(100, 100, 'crop'); $uploadObj -> greyScaleDramatic();
Note: These are just a couple of examples of actions you can apply! See the Action section for more!
$uploadObj -> saveImage($uploadObj->getTargetPath(), $imageQuality);
<form action="14.1_upload.php" method="POST" enctype="multipart/form-data">
<input type="file" name="img-upload" value="" />
<input type="submit" value="upload" name="submit" />
</form>
Well that's pretty much it. Easy huh? See below for the complete code listing.
include('image_lib/upload_class.php');
$formInputName = 'img-upload';
$savePath = 'output3';
$saveName = 'test';
$allowedExtArray = array('.jpg', '.png', '.gif', '.bmp');
$imageQuality = 100;
$uploadObj = new imageUpload($formInputName, $savePath, $saveName, $allowedExtArray);
$uploadObj -> resizeImage(100, 100, 'crop');
$uploadObj -> greyScaleDramatic();
$uploadObj -> saveImage($uploadObj->getTargetPath(), $imageQuality);
HTML
<form action="14.1_upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="img-upload "value="" /> <input type="submit" value="upload" name="submit" /> </form>
Make sure the form input name and $formInputName setting are the same!
Also change the forms action to the name and location of your file.
Note: One last reminder, make sure your upload directory is writable by the server.
The following image types are supported. Please note the following:
Image type | Read support | Write support | Transparency support |
---|---|---|---|
jpg | ![]() |
![]() |
![]() |
png | ![]() |
![]() |
![]() |
gif | ![]() |
![]() |
![]() |
bmp | ![]() |
![]() |
![]() |
psd | ![]() |
![]() |
![]() |
As Image Tools with BMP Support strives for ease of use, we try to make every option and parameter as flexible as possible. Colors are no exception. All color parameters accept color supplied as hex or RGB. When using RGB, colors must be supplied in an array with the values in the order of RGB.
Where transparency is supported you can use the value 'transparent' to select transparency.
When supplying colors as a parameter the following formats can be used. The examples use the color white and is also case-insensitive.
Image Tools with BMP Support has a few configurable settings for the power users out there. These usually require opening up the PHP class files and making a change. But don't worry, this is not something that is required; just a way to make a few tweaks.
This will enable PNG interlacing. To do this, find the following code and set the value to true:
$this->pngInterlace = false;
This will prevent any custom messages from being displayed to the user. To do this, find the following code and set the value to false:
private $debug = true;
If you have a transparent png image and you wish to save it as a jpg, you need will need to turn transparency off with setTransparency(). You can also then set the background color of the image with setFillColor().
Example
$imageLibObj -> setTransparency(false);
$imageLibObj -> setFillColor('#cccccc');
$imageLibObj -> resizeImage(64, 64);
Set the USE_CACHE value to false like so:
define('USE_CACHE', false);
Set the ALLOW_ACTIONS value to false like so:
define('ALLOW_ACTIONS', false);
If enabled, auto convert will automatically output images as png if you use an action such as shadows with transparency. To disable this, set the AUTO_CONVERT value to false like so:
define('AUTO_CONVERT', false);
Image Tools with BMP Support requires the following.
Optional. Required for certain features
If you have any issues, please try these first:
GeneralIf you find a bug, please report it at bugs@oberto.co.nz
I've used the following methods or classes as listed.
If you think this code is greater than the love child of a leprechaun and cherub, please consider giving it a 5 star rating. It gives me warm fuzzies. Honestly.
If you don't think it's worthy of 5 stars then please PLEASE send me an email (codecanyon@oberto.co.nz) and let me know why. I strive to make my code golden but can only do that with your feedback!
Thanks for purchasing Image Tools with BMP Support. As I said at the beginning, I'd be glad to help you if you have any questions relating to the code. No guarantees, but I'll do my best to assist!
Jarrod Oberto