Recherche avancée

Sur d’autres sites (12498)

• Padding thumbnail with color

  9 juin 2010, par Mikko Koppanen — Imagick, 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.

  php

  < view plain text >

  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 :
  

  The resulting image :
  

• Creating buttons with Imagick

  9 juin 2010, par Mikko Koppanen — Imagick, 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 :

  php

  < view plain text >

  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 :

  

  

  

• Creating a reflection

  9 juin 2010, par Mikko Koppanen — Imagick, 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.

  php

  < view plain text >

  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 :

  

  And the result :

  

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