Imagick « Mikko’s blog

Beaucoup de tutoriels au sujet d’ImageMagick (Utile pour le plugin doc2img)

http://valokuva.org/?cat=1

Les articles publiés sur le site

  • Seam carving

    9 juin 2010, par Mikko KoppanenImagick, PHP stuff

    Today I was reading trough the ImageMagick ChangeLog and noticed an interesting entry. “Add support for liquid rescaling”. I rushed to check the MagickWand API docs and there it was: MagickLiquidRescaleImage! After about ten minutes of hacking the Imagick support was done. Needless to say; I was excited :)

    For those who don’t know what seam carving is check the demo here. More detailed information about the algorithm can be found here: “Seam Carving for Content-Aware Image Resizing” by Shai Avidan and Ariel Shamir

    To use this functionality you need to install at least ImageMagick 6.3.8-2 and liblqr. Remember to pass –with-lqr to ImageMagick configuration line. You can get liblqr here: http://liblqr.wikidot.com/. The Imagick side of the functionality should appear in the CVS today if everything goes as planned.

    Here is a really simple example just to illustrate the results of the operation. The parameters might be far from optimal (didn’t do much testing yet). The original dimensions of image are 500×375 and the resulting size is 500×200.

    Update: the functionality is pending until license issues are solved.

    1. <?php
    2.  
    3. /* Create new object */
    4. $im = new Imagick( 'test.jpg' );
    5.  
    6. /* Scale down */
    7. $im->liquidRescaleImage( 500, 200, 3, 25 );
    8.  
    9. /* Display */
    10. header( 'Content-Type: image/jpg' );
    11. echo $im;
    12.  
    13. ?>

    The original image by flickr/jennconspiracy

    result

    And the result:

    result

    Update. On kenrick’s request here is an image which is scaled down to 300×300

    result2

  • Typesetting

    9 juin 2010, par Mikko KoppanenImagick, PHP stuff

    Ever had the situation where you have a piece of string which you need to overlay on an image? Maybe a situation where the area reserved for the string is known in pixels but you need to know the font size to fill most of the area? Think no more!

    Here is a small example of how to fit a certain piece of a string on to an area of which you know the width and the height or only the width. The magic happens through the ImageMagick CAPTION: format. You can see from the example images how the parameters actually affect the image.

    1. <?php
    2.  
    3. /* How wide is our image */
    4. $image_width = 200;
    5.  
    6. /* Give zero for autocalculating the height */
    7. $image_height = 200;
    8.  
    9. /* Specify the text */
    10. $text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    11.         Mauris lectus mi, mattis non, euismod vel, sagittis nec, ipsum.";
    12.  
    13. /* Instanciate imagick */
    14. $im = new Imagick();
    15.  
    16. /* Create new image using caption: pseudo format */
    17. $im->newPseudoImage( $image_width, $image_height, "caption:" . $text );
    18.  
    19. /* Put 1px border around the image */
    20. $im->borderImage( 'black', 1, 1 );
    21.  
    22. /* PNG format */
    23. $im->setImageFormat( "png") ;
    24.  
    25. /* Output */
    26. header( "Content-Type: image/png" );
    27. echo $im;
    28.  
    29. ?>

    Here is image with width 100 and height 0:

    width_100_height_0.png

    Width 100 Height 50:

    width_100_height_50.png

    Width 200 Height 200 (as you can see the font size is now larger):

    width_200_height_200.png

  • Padding thumbnail with color

    9 juin 2010, par Mikko KoppanenImagick, PHP stuff

    I know, it’s been a while since I last blogged. This is because a lot of things are happening in my personal life. I recently relocated to London from Finland and started a new job. Things are quite busy but I will try to post an example now and then. In the meanwhile I would like to hear about sites using Imagick, so if your project is not super secret please post an url and maybe a small explanation what you’re doing with Imagick on the site. This is purely for my personal interest.

    Anyway, to the point. Today’s example originates from a question asked by a user. How do I thumbnail the image inside given dimensions proportionally and fill the “blank” areas with a color? Well, the answer is here :)

    The code is for Imagick 2.1.0 but adapting to older versions should not be hard.

    1. <?php
    2. /* Define width and height of the thumbnail */
    3. $width = 100;
    4. $height = 100;
    5.  
    6. /* Instanciate and read the image in */
    7. $im = new Imagick( "test.png" );
    8.  
    9. /* Fit the image into $width x $height box
    10.  The third parameter fits the image into a "bounding box" */
    11. $im->thumbnailImage( $width, $height, true );
    12.  
    13. /* Create a canvas with the desired color */
    14. $canvas = new Imagick();
    15. $canvas->newImage( $width, $height, 'pink', 'png' );
    16.  
    17. /* Get the image geometry */
    18. $geometry = $im->getImageGeometry();
    19.  
    20. /* The overlay x and y coordinates */
    21. $x = ( $width - $geometry['width'] ) / 2;
    22. $y = ( $height - $geometry['height'] ) / 2;
    23.  
    24. /* Composite on the canvas  */
    25. $canvas->compositeImage( $im, imagick::COMPOSITE_OVER, $x, $y );
    26.  
    27. /* Output the image*/
    28. header( "Content-Type: image/png" );
    29. echo $canvas;
    30.  
    31. ?>

    The source image:
    test.png

    The resulting image:
    testphp.png

  • Creating buttons with Imagick

    9 juin 2010, par Mikko KoppanenImagick, PHP stuff

    A fellow called kakapo asked me to create a button with Imagick. He had an image of the button and a Photoshop tutorial but unfortunately the tutorial was in Chinese. My Chinese is a bit rusty so it will take a little longer to create that specific button ;)

    The button in this example is created after this tutorial http://xeonfx.com/tutorials/easy-button-tutorial/ (yes, I googled “easy button tutorial”). The code and the button it creates are both very simple but the effect looks really nice.

    Here we go with the code:

    1. <?php
    2.  
    3. /* Create a new Imagick object */
    4. $im = new Imagick();
    5.  
    6. /* Create empty canvas */
    7. $im->newImage( 200, 200, "white", "png" );
    8.  
    9. /* Create the object used to draw */
    10. $draw = new ImagickDraw();
    11.  
    12. /* Set the button color.
    13.    Changing this value changes the color of the button */
    14. $draw->setFillColor( "#4096EE" );
    15.  
    16. /* Create the outer circle */
    17. $draw->circle( 50, 50, 70, 70 );
    18.  
    19. /* Create the smaller circle on the button */
    20. $draw->setFillColor( "white" );
    21.  
    22. /* Semi-opaque fill */
    23. $draw->setFillAlpha( 0.2 );
    24.  
    25. /* Draw the circle */
    26. $draw->circle( 50, 50, 68, 68 );
    27.  
    28. /* Set the font */
    29. $draw->setFont( "./test1.ttf" );
    30.  
    31. /* This is the alpha value used to annotate */
    32. $draw->setFillAlpha( 0.17 );
    33.  
    34. /* Draw a curve on the button with 17% opaque fill */
    35. $draw->bezier( array(
    36.                     array( "x" => 10 , "y" => 25 ),
    37.                     array( "x" => 39, "y" => 49 ),
    38.                     array( "x" => 60, "y" => 55 ),
    39.                     array( "x" => 75, "y" => 70 ),
    40.                     array( "x" => 100, "y" => 70 ),
    41.                     array( "x" => 100, "y" => 10 ),
    42.                  ) );
    43.  
    44. /* Render all pending operations on the image */             
    45. $im->drawImage( $draw );
    46.  
    47. /* Set fill to fully opaque */
    48. $draw->setFillAlpha( 1 );
    49.  
    50. /* Set the font size to 30 */
    51. $draw->setFontSize( 30 );
    52.  
    53. /* The text on the */
    54. $draw->setFillColor( "white" );
    55.  
    56. /* Annotate the text */
    57. $im->annotateImage( $draw, 38, 55, 0, "go" );
    58.  
    59. /* Trim extra area out of the image */
    60. $im->trimImage( 0 );
    61.  
    62. /* Output the image */
    63. header( "Content-Type: image/png" );
    64. echo $im;
    65.  
    66. ?>

    And here is a few buttons I created by changing the fill color value:

    red

    green

    blue

  • Creating a reflection

    9 juin 2010, par Mikko KoppanenImagick, PHP stuff

    Here is a simple example of creating a reflection of an image. The reflection is created by flipping the image and overlaying a gradient on it. Then both, the original image and the reflection is overlayed on a canvas.

    This example is created for Imagick 2.1.x but with a little tuning it should work with earlier versions.

    1. <?php
    2.  
    3. /* Read the image */
    4. $im = new Imagick( "strawberry.png" );
    5.  
    6. /* Thumbnail the image */
    7. $im->thumbnailImage( 200, null );
    8.  
    9. /* Create a border for the image */
    10. $im->borderImage( "white", 5, 5 );
    11.  
    12. /* Clone the image and flip it */
    13. $reflection = $im->clone();
    14. $reflection->flipImage();
    15.  
    16. /* Create gradient. It will be overlayd on the reflection */
    17. $gradient = new Imagick();
    18.  
    19. /* Gradient needs to be large enough for the image
    20. and the borders */
    21. $gradient->newPseudoImage( $reflection->getImageWidth() + 10,
    22.                            $reflection->getImageHeight() + 10,
    23.                            "gradient:transparent-black"
    24.                         );
    25.  
    26. /* Composite the gradient on the reflection */
    27. $reflection->compositeImage( $gradient, imagick::COMPOSITE_OVER, 0, 0 );
    28.  
    29. /* Add some opacity */
    30. $reflection->setImageOpacity( 0.3 );
    31.  
    32. /* Create empty canvas */
    33. $canvas = new Imagick();
    34.  
    35. /* Canvas needs to be large enough to hold the both images */
    36. $width = $im->getImageWidth() + 40;
    37. $height = ( $im->getImageHeight() * 2 ) + 30;
    38. $canvas->newImage( $width, $height, "black", "png" );
    39.  
    40. /* Composite the original image and the reflection on the canvas */
    41. $canvas->compositeImage( $im, imagick::COMPOSITE_OVER, 20, 10 );
    42. $canvas->compositeImage( $reflection, imagick::COMPOSITE_OVER,
    43.                         20, $im->getImageHeight() + 10 );
    44.  
    45. /* Output the image*/
    46. header( "Content-Type: image/png" );
    47. echo $canvas;
    48.  
    49. ?>

    The source image:

    source

    And the result:

    result

    P.S. Please send me some new images which I can use in these examples ;)