Image_moo

Page

Image_Moo is currently at version 1.1.6 – 5th Feb 2014

The CI library for image manipulation is great, but I found it awkward to use when doing multiple processes. So I wrote my own library which I’m happy for you to play with and send feedback. It is limited to PHP 5 and GD2 only, sorry, but that suits my needs

Download image_moo (v1.1.5 GIT)

Install

Copy the unzipped file to /system/application/libraries for CI > 1.7.2 and /application/libraries for CI 2.

Functions

load($x) - Loads a base image as specified by $x - JPG, PNG, GIF supported. This is then used for all processing and is kept in memory till complete

load_temp() - Copies the temp image (e.g. cropped) and make it the new main image

save($x,$overwrite=FALSE) - Saved the manipulated image (if applicable) to file $x - JPG, PNG, GIF supported. If overwrite is not set file write may fail. The file saved will be dependant on processing done to the image, or a simple copy if nothing has been done.

get_data_stream($filename="") - Return raw data that can be encoded and displayed in an image tag, e.g. $x = $this->image_moo->load('x')->get_data_stream(); $y = base64_encode($x); print '<img src="data:image/jpg;base64,'.$y.'">';

save_dynamic($filename="") - Saves as a stream output, use filename to return png/jpg/gif etc., default is jpeg (This also sends relevant headers)

save_pa($prepend="", $append="", $overwrite=FALSE) - Saves the file using the original location and filename, however it adds $prepend to the start of the filename and adds $append to the end of the filename. e.g. if your original file was /this/that/file.jpg you can use save_pe("pre_", "_app", TRUE) to save it as /this/that/pre_file_app.jpg

resize($x,$y,$pad=FALSE) - Proportioanlly resize original image using the bounds $x and $y, if padding is set return image is as defined centralised using current background colour (set_background_colour)

resize_crop($x,$y) - Proportioanlly resize original image using the bounds $x and $y but cropped to fill dimensions

stretch($x,$y) - Take the original image and stretch it to fill new dimensions $x $y, unless you have done the calculations this will distort the image

crop($x1,$y1,$x2,$y2) - Crop the original image using Top left, $x1,$y1 to bottom right $x2,y2. New image size =$x2-x1 x $y2-y1

rotate($angle) - Rotates the work image by X degrees, normally 90,180,270 can be any angle.Excess filled with background colour

load_watermark($filename, $transparent_x=0, $transparent_y=0) - Loads the specified file as the watermark file, if using PNG32/24 use x,y to specify direct positions of colour to use as index

make_watermark_text($text, $fontfile, $size=16, $colour="#ffffff", $angle=0) - Creates a watermark image using your text and specified ttf font file. 

watermark($position, $offset=8, $abs=FALSE) - Use the loaded watermark, or created text to place a watermark. $position works like NUM PAD key layout, e.g. 7=Top left, 3=Bottom right $offset is the padding/indentation, if $abs is true then use $positiona and $offset as direct values to watermark placement 

shadow($size=4, $direction=3, $colour="#444") - Add a basic shadow to the image. Size in pixels, note that the image will increase by this size, so resize(400,400)->shadow(4) will give an image 404 pixels in size, Direction works on the keypad basis like the watermark, so 3 is bottom right, 7 top left, $color if the colour of the shadow.

border($width,$colour="#000") - Draw a border around the output image X pixels wide in colour specified. This can be used multiple times, e.g. $this->image_moo->border(6,"#fff")->border(1,"#000") creates a photo type of border

border_3d($width,$rot=0,$opacity=30) - Creates a 3d border (opaque) around the current image $width wise in 0-3 rot positions, $opacity allows you to change how much it effects the picture

filter($function, $arg1=NULL, $arg2=NULL, $arg3=NULL, $arg4=NULL) - Runs the standard imagefilter GD2 command, see http://www.php.net/manual/en/function.imagefilter.php for details

round($radius,$invert=FALSE,$corners(array[top left, top right, bottom right, bottom left of true or False)="") default is all on and normal rounding. This functions masks the corners to created a rounded edge effect.

Image helper functions

display_errors($open = '<p>', $close = '</p>') - Display errors as Ci standard style. Example if ($this->image_moo->error) print $this->image_moo->display_errors();

ignore_jpeg_warnings($onoff = TRUE) - relax the GD strictness for loading jpegs

allow_scale_up($onoff = FALSE) - Allow you to stretch images that are too small to match resize/crop request

real_filesize() - returns the size of the file in B,KB,MB.GB or T (as if!)
set_jpeg_quality($x) - quality to wrte jpeg files in for save, default 75 (1-100)

set_watermark_transparency($x) - the opacity of the watermark 1-100, 1-just about see, 100=solid

check_gd() - Run to see if you server can use this library

clear_temp() - Call to clear the temp changes using the master image again

clear() - Use to clear all loaded images form memory

Examples

All the examples here will use the image as shown on the right hand side (click to expand) and we will use the save_dynamic output instead of saving as a file. Of course all the examples are missing 2 bits of common code, to reduce space used. Before image_moo works, you need to load it with $this->load->library(“image_moo”);, and after running a function you should check for errors and report as needed. if($this->image_moo->error) print $this->image_moo->display_errors();.

Cropping

The following section shows the various ways Image_moo can crop and resize an image

Simple crop
Image is cropped to a max in either axis of 100 pixels, output image will be the same ratio as the input image
$this->image_moo
	->load("DSC01707.JPG")
	->resize(100,100)
	->save_dynamic()

Crop keep proportions but outputting a fixed size
Image is cropped as above, but the output is padded to fit the specified size. Please note I set a funny background colour for visual reasons only
$this->image_moo
	->load('DSC01707.JPG')
	->set_background_colour("#49F")
	->resize(100,100,TRUE)
	->save_dynamic();

Resize with crop
Image is resized to an exact size based on cropping a ratio match from the original image
$this->image_moo
	->load('DSC01707.JPG')
	->resize_crop(100,100)
	->save_dynamic();

Borders

In these examples we will add various borders to the output image

Simple photo style border
$this->image_moo
	->load('DSC01707.JPG')
	->resize_crop(100,100)
	->border(5, "#ffffff")
	->border(1, "#000000")
	->save_dynamic();

Rounded corners
Note that the background colour used can be set with the set_background_colour command, we have left it white for this example.
$this->image_moo
	->load('DSC01707.JPG')
	->resize_crop(100,100)
	->round(5)
	->save_dynamic();

3d effect
$this->image_moo
	->load('DSC01707.JPG')
	->resize_crop(100,100)
	->border_3d(5)
	->save_dynamic();

Watermarking

You can also apply watermarks to your images!

Using an image
$this->image_moo
	->load('DSC01707.JPG')
	->load_watermark("matmoo.gif")
	->resize(400,400)
	->watermark(5)
	->save_dynamic();



Using your own text
$this->image_moo
	->load('DSC01707.JPG')
	->make_watermark_text("MatMoo.com", "DANUBE__.TTF", 25, "#000")
	->resize(400,400)
	->watermark(2)
	->save_dynamic();

Conclusion

As you can see this library is much easier to use than that default Image_lib that comes with CI, especially when it comes to mulitple picture outputs. For example; once an image is loaded you can run multiple commands and saves on it $this->image_moo->load(“image.jpg”)->resize(600,600)->save(“large.jpg”)->resize(400,400)->save(“medium.jpg”)->resize(100,100)->save(“small.jpg”) and of course you can add watermarks after each resize (or borders) as well.

Todo

Rotated text fix box size

Changelog

1.1.5: 5th Feb 2014, contributed modification to rotate and other minor fixes
1.1.5: 13th Oct 2012, Err new functions and other animals (sorry forgot to make a log of changes!)
1.0.1: 13th Dec 2010, Fixed watermark text after changes to images, it got broken (oops)
1.0.0: 7th Dec 2010, Change the way the watermarks are applied using a suggested fix from the PHP help docs on imagecopy,merge page
0.9.9b: 10th Nov 2010, Modify resize routine calculation, thanks Cole
0.9.9a : 17th Oct 2010, Another pa save bug!
0.9.9 : 1st Oct 2010, added shadow system
0.9.3 : 10th Sep 2010, bug fix in save_pa thanks to Matjaz
0.9.2 : 26th Aug 2010, fixed an error with set background colour (stupid cut and paste error!)
0.9.2 : 26th Aug 2010, added a couple of additional defaults for round and border

127 thoughts on “Image_moo”

  1. Gile

    Ahhh…finally your back. I tought image_moo went for good, coz this page was 500 error for some time.
    Like new design and love image_moo. Keep up!

  4. i solved the problem of transparency by making some change in the line of image_moo.php
    here are the changes….
    ===============================
    /near of line 553… add this line
    //if padding, fill background…

    if ($pad)
    {
    $col = $this->_html2rgb($this->background_colour);

    if($this->background_colour != “”){
    $bg = imagecolorallocate($this->temp_image, $col[0], $col[1], $col[2]);
    imagefilledrectangle($this->temp_image, 0, 0, $tx, $ty, $bg);
    }else{
    imagecolortransparent ( $this->temp_image , imagecolorallocate($this->temp_image, $col[0], $col[1], $col[2]) );
    }
    }

    ===============================
    //and finally use…

    $this->image_moo
    ->load(‘source_image.png’)
    ->set_background_colour(“#TRANSPARENT”)
    ->resize(100,100,TRUE)
    ->save(“saved_image.png”); //remember save to png

  5. Hello dude,
    when i upload .png image to resize…it’s transparent background turns to white…
    will u plz help me to solve this issue
    i am using like this
    here is my code…
    ==============================================

    public function index()
    {
    $this->load->library(‘image_moo’);

    $TempImageName = $_FILES[‘uploaded_image’][‘tmp_name’];//temp image name
    $OldImageName = $_FILES[‘uploaded_image’][‘name’]; // real image name
    $main_image_saved_dir = “assets/uploaded/img/”;
    $this->image_moo->load($TempImageName)->resize(1024,768)->save($main_image_saved_dir.$OldImageName); $this->image_moo->load($TempImageName)->resize(600,600)->save($main_image_saved_dir.”600×600″.$OldImageName)->resize(400,400)->save($main_image_saved_dir.”400×400″.$OldImageName)->resize(100,100)->save($main_image_saved_dir.”100×100″.$OldImageName);

    }

    ==============================================

    Thanks
    Daya

  10. Jothikannan


    Jothikannan:

    Hi,
    Am thanks for the such a good library
    Am using your library to crop and resize the images, it is working fine in the way,
    But while crop some of the larger images am getting following error
    Array ( [error] =>
    Invalid crop dimensions, either – passed or width/heigh too large 0/0 x 1106/240
    )
    What i have to do ?? can i set the default height and width for the crop, if i set default Height and Width, the crop will work ??

  11. Jothikannan

    Hi,

    Am thanks for the such a good library

    Am using your library to crop and resize the images, it is working fine in the way,

    But while crop some of the larger images am getting following error

    Array ( [error] =>

    Invalid crop dimensions, either – passed or width/heigh too large 0/0 x 1106/240
    )

    What i have to do ?? can i set the default height and width for the crop, if i set default Height and Width, the crop will work ??

  12. Hi.
    Why doesn’t work my code ?

    $this->load->library(‘admin/image_moo’);
    $this->image_moo->load(FCPATH.’Dosyalar/orjinal/’.$fileName)->resize(200,100000)->save(FCPATH.’Dosyalar/kucuk/’.$fileName)->resize(350,100000)->save(FCPATH.’Dosyalar/orta/’.$fileName)->resize(800,100000)->save(FCPATH.’Dosyalar/buyuk/’.$fileName);

    These codes redirect me to a blank (white) page. I’m sure files were uploaded and path is correct.

    If u have any sugegestion i ll be grateful,
    Thanks a lot.

  13. Hi there
    i fix the rotate functions and now is working with alpha png

    public function rotate($angle)
    //———————————————————————————————————-
    // rotate an image bu 0 / 90 / 180 / 270 degrees
    //———————————————————————————————————-
    {
    // validate we loaded a main image
    if (!$this->_check_image()) return $this;

    // if no operations, copy it for temp save
    $this->_copy_to_temp_if_needed();

    // set the colour
    $col = $this->_html2rgb($this->background_colour);
    //$bg = imagecolorallocate($this->temp_image, $col[0], $col[1], $col[2]);
    $bg = imagecolorallocatealpha($this->temp_image, 0, 0, 0, 127);

    // rotate as needed
    $this->temp_image = imagerotate($this->temp_image, $angle, $bg);
    imagealphablending($this->temp_image, false);
    imagesavealpha($this->temp_image, true);

    // set sizes
    $this->_set_new_size();

    // return self
    return $this;
    }

  14. Julio

    Hi, Excelent work,
    Im new in CodeIgniter, (like 3 weeks),
    I have a very stupid question: How to display the image in the view file?
    The next code give me an image error:
    ‘The image “http://localhost/ci_projects/ci_metronic_1/test” cannot be displayed because it contains errors.’

    Untitled Document

    image_moo
    ->load('assets/uploads/soldiers.jpg')
    ->resize(100,100)
    ->save_dynamic()
    ?>

    but if i remove all HTML tags, the image is displayed.

    How to display the image in the view file?

    Thanks for this good library.

    • Julio

      Got it,
      just i write the code in a function display() of my controller Image(); then in my view, the img src=”image/display” and thats it.

      All the configuration of the image to display is in the controller, not in the view.

      EXCELENT LIBRARY !!!

  16. does not work at all.
    I cant see errors, writing
    if($this->image_moo->error) print $this->image_moo->display_errors();
    gives

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined property: Image_moo::$error

    Filename: views/home.php

    Line Number: 10

    ALSO
    print_r($this->image_moo->load($image)->resize(50,50)->save_dynamic());
    shows
    Image_moo Object
    (
    [main_image:Image_moo:private] =>
    [watermark_image:Image_moo:private] =>
    [temp_image:Image_moo:private] =>
    [jpeg_quality:Image_moo:private] => 75
    [background_colour:Image_moo:private] => #ffffff
    [watermark_method:Image_moo:private] =>
    [filename:Image_moo:private] => http://localhost/kjs/products/6943c-Adrenal-Energy-Formula.jpg
    [watermark_transparency:Image_moo:private] => 50
    [errors] => 1
    [error_msg:Image_moo:private] => Array
    (
    [0] => Could not locate file http://localhost/kjs/products/6943c-Adrenal-Energy-Formula.jpg
    [1] => No main image loaded!
    [2] => No main image loaded!
    )

    [width] => 0
    [height] => 0
    )
    the image path is 100% correct
    ALSO
    my code
    foreach(){
    $picd = get_image_properties(‘products/’.$pro->pro_image, TRUE);
    $image = base_url(‘products/’.$pro->pro_image);
    if($picd[‘width’]>120 && $picd[‘width’]image_moo->load($image)->resize(50,50)->save_dynamic();}
    if($picd[‘width’]>200 && $picd[‘width’]image_moo->load($image)->resize(160,160)->save_dynamic();}

    }
    ?>

    please help

    • if($this->image_moo->errors) print $this->image_moo->display_errors();

      Image paths can not load form a http location, you need the real file path where the image is stored.

  18. Moo! (as in Hi!)

    A little problem with watermarking. If the watermark image or watermark text image is too big, it does not show the watermark at all. This gives a little problem because our customers should be able to set the font-size + text or image and the watermark is added to all pictures that they upload, even smaller ones.

    I guess I could circumvent this by first creating the watermark image on the fly depending on dimensions of the uploaded image first and then add the watermark to that.

    PS. Aww crap! I just read the source and you have that “// check watermark will fit!” comment there 😛

    For the time being, I just commented it out and watermark works now (It doesnt matter if it doesnt fit completely in every pic).

    Thanks for great lib!


  21. Julien:

    I found a fix for my issue !
    Just added two lines at line 545 after:
    $this->temp_image = imagecreatetruecolor($tx,$ty);
    Here is the code:
    imagealphablending( $this->temp_image, false);
    imagesavealpha( $this->temp_image, true);

    Thanks, It work well

  22. Thanks for your work.
    It helps me to fix the issue when I unzip, save, then make thumb and resize for multiple files.

    When use CI Image lib, it doesn’t work. but use yours it work

    I really appreciate that.

  25. Hi, i want to ask some question
    i have image 200 x 120
    and i want to resize to 460 x 290

    Why the image output still same 200×120?
    not 460×270.

    image type jpeg.
    Thanks.

  26. Hello

    Thank u for your hard work.

    I have been trying for 12 hours nonstop to make it work when I upload 2 or more pictures that require different resizing. Imagine that I may want to upload a thumb and then the other pics at a larger size.
    In your explanations you write about doing different things to a single picture, but I am using the grocerycrud library and I have one upload button for thumb and another one for pic, which should be resized at different sizes. Cant find the right way to use the after_upload callback functions.

  31. Hello Mat,

    First of all I want to thank you for your great plugin 🙂
    I have been using it on a project before and it works just fine.

    I am currently trying to resize transparent PNGs but I get a black background and the transparency is lost….

    Any clue on what to change to allow transparent PNGs resizing ?


  33. Enrico Palazzo:

    This is not working.
    any updates on the transparent PNG issue?

    It’s working now. I changed the code on codeigniters forum solution.
    I just changed $this->width and $this->height for $tx and $ty
    This is how the code should look on lines 555 to 560

    $col = $this->_html2rgb($this->background_colour);
    $bg = imagecolorallocate($this->temp_image, $col[0], $col[1], $col[2]);
    imagealphablending($this->temp_image, false);
    imagesavealpha($this->temp_image, true);
    $color = imagecolorallocatealpha($this->temp_image, 0, 0, 0, 127);
    imagefilledrectangle($this->temp_image, 0, 0, $tx, $ty, $color);

  34. Hey, just wanted to say thanks for this library. I’ve used it in the past for a big B2B e-commerce project and now I’m using it for one of my smaller personal projects.

    All the best,
    Joseph

  35. Hello,

    i am tried to load a simple image

    class image extends CI_Controller {

    function index(){

    $this->load->library(“image_moo”);
    $this->image_moo
    ->load(“/../imagini/r.jpg”)
    ->resize(100,100);
    if($this->image_moo->errors)
    print $this->image_moo->display_errors();
    }

    }

    but i have a error “Could not locate file”.
    I am created a folder “imagini” where is the main folders(application and system). I gave the path “/../imagini/r.jpg” and nothing . Can give me a solution .
    Thank you ,

  38. Hi!
    I’m trying to just load an image and the apache error log gives me this: PHP Fatal error: Call to a member function load() on a non-object in /home/niko/Documents/lamko/app/views/crop.php on line 6, referer: http://localhost/
    What could cause this?

    My crop.php is just

    load->library(“image_moo”);

    $this->image_moo
    ->load(‘/var/www/test.jpg’);

    ?>

    Thanks!

  40. Hi, i’m having trouble by using your library. After loading the library I get ‘Undefined property: Image_moo::$error’, not being able to see the actual error of why My image is not being resized. I just copyied the example an it’s throwing this… any idea?

  43. Hi
    I’ve downloaded the library, but I’m getting errors when loading from a view
    $this->load->library(“image_moo”);
    $this->image_moo->load(“../images/img01.jpg”);

    A PHP Error was encountered
    Severity: Notice
    Message: Undefined property: CI_Loader::$image_moo
    Filename: views/vista_datos_cuenta.php
    Line Number: 270

    • Sorry for the delay (See my post about not being able to access WP-Admin!)
      In CI you don’t normally do work in the view itself, the view is just that. What are you trying to achieve?

  47. This library looks pretty good – I was looking for something like this but with a bit more functionality (flip horizontal, vertical, text with stroke). Would you consider putting the library on github so that I (and others) can fork it, make changes and send you any pull requests for you to review?

    • Adding flip is pretty easy, just never had a need for it myself 🙂 In terms of text with stroke, is that for watermarking? For now I’d rather keep the library hosted on here, you are free to do what you want with it though.

    • Well you would need to crop->curve->shadow, but with the current code the shadows are restricted to square only. I do have an idea on how to improve this, but not the time to implement it at the moment, sorry.

  55. This is simply amazing! I have a quick question. For the padded crop, is there a way we can only add padding to one direction of the image (e.g., add padding to the right of an image)? I’m trying to add a one sided pad and a watermark on the right of an image.

    Thanks!

  56. Hi,
    i have problem with image quality after saving :

    $this->image_moo ->load($upload_path . $file_name)
    ->load_watermark(“wm.png”) ->set_jpeg_quality(100)
    ->watermark(3,TRUE)
    ->save($original_path . $file_name);

    i set set_jpeg_quality to 100, but the result is same image quality and bad wotermark quality …

    how to set watermark image quality to 100%.

    Thanks in advance and sorry for my bad english

  57. First off thanks for the library, it is a great improvement on the default CI library and saves us a ton of time.

    One thing I noticed when I ran a pretty fringe case was I don’t think you calculate the new dimensions quite correctly int he resize method On line 511 you check to see if the image width is greater than the image height. If it is then you use the crop width as the new width. However this doesn’t always yield the proper results take for instance this example:

    max_h = 200
    max_w = 1000

    image_h = 300
    image_w = 400

    new_h = 750
    new_w = 1000

    however if you change line 511 to check the ratio to decide which should be max you will always keep it within the bounds of max width and max height

    if( $this->width / $this->height > $mw / $mh ) {

  59. Hi, how can I crop image, if i have only 2 coordinates: x_axis and y_axis in CI´s Image Manipulation Class. image_moo requires 4 parametres: x1,x2,y1,y2. Thank you.

  61. The save_pa function is still broken. The error is now in line 237:

    Original:
    $this->save($newfile,$parts[“dirname”].’/’.$prepend.$parts[‘filename’].$append.’.’.$parts[“extension”], $overwrite);

    ..should be:
    $this->save($parts[“dirname”].’/’.$prepend.$parts[‘filename’].$append.’.’.$parts[“extension”], $overwrite);

    Anyway, great lib and works like a charm(after the bugfix) 🙂

  63. This looks excellent! Thanks!

    Although I found a minor bug in save_pa function. Line 233 should probably say:

    $this->save($parts[“dirname”].’/’.$prepend.$parts[‘filename’].$append.’.’.$parts[“extension”],$overwrite);

Leave a Reply

Your email address will not be published. Required fields are marked *