{"id":297,"date":"2011-04-19T15:25:42","date_gmt":"2011-04-19T15:25:42","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=297"},"modified":"2012-07-26T13:27:04","modified_gmt":"2012-07-26T13:27:04","slug":"generate-gradient-image-with-php","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/web-development\/php\/generate-gradient-image-with-php\/","title":{"rendered":"Generate gradient image with php"},"content":{"rendered":"

There are a lot of nice effects you can get using php’s gd library<\/a>. The one I decided to show now is a very simple way to render an image <\/strong>with a gradient <\/strong>between any two colors<\/strong>.<\/p>\n

You will be able to use this script for a wide range of needs considering that it gives you the possibility to send as a parameter all the needed variables (initial color, final color, size and orientation).<\/p>\n

The main idea behind this script is the fact that if you know the size of the needed output (in pixels) you can use it as the number of steps needed in making the transition <\/strong>between the two colors. Also, because each color can be expressed using the red, blue and green components with values between 0 and 255 you can get the arithmetic progression’s common difference by dividing the difference between each colors’ components to the number of steps (-1 for the initial step).<\/p>\n

This way if the initial color has the red component 10 and the final color 50 and you need a 5 pixels image the red values for the steps will be 10, 20, 30, 40 and 50.<\/p>\n

So at each step we will use something like this:<\/p>\n

\r\n$color_red = floor($step * ($final_color_red-$initial_color_red) \/ $image_size)+$initial_color_red;\r\n<\/pre>\n
In order to assign the colors to the gd resource<\/strong> we can use the imagecolorallocate<\/a> function this way:<\/p>\n
\r\n$color = imagecolorallocate($image, $color_red, $color_green, $color_blue);\r\n<\/pre>\n
Now that we have the color for the current step we need to draw a line<\/strong> using it, like this:<\/p>\n
\r\nimageline($image, 0, $step, $image_width, $step, $color);\r\n<\/pre>\n
That’s all the theory you need to understand this script.
\nYou can download a full working example<\/strong> here<\/a>.<\/p>\n
To use this script you can call it in its default configuration like this http:\/\/localhost\/gradient.php and you will get a picture like this one:<\/p>\n
\"Default<\/a>
Default Script Output<\/p><\/div>\n
A custom way to use this script would be like this: http:\/\/localhost\/gradient.php?width=300&height=200&from_r=0&from_g=255&from_b=0&to_r=0&to_g=0&to_b=255 and you will get a 300×200 image with a gradient between green and blue that will look like this:<\/p>\n
\"Custom<\/a>
Custom Script Output<\/p><\/div>\n
That’s all about this script, I hope that you will like it and most of all find it useful. If you have any questions or comments please feel free to use the form below.<\/p>\n
\t
\n\t \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t<\/form>\n\t\t\t
If you liked this post 
 you can buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
There are a lot of nice effects you can get using php’s gd library. The one I decided to show now is a very simple way to render an image with a gradient between any two colors. You will be able to use this script for a wide range of needs considering that it gives …<\/p>\n
Read more<\/a><\/div>\n
\n        <\/div><\/div>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[77,78,35],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/297"}],"collection":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":5,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"predecessor-version":[{"id":787,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/297\/revisions\/787"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}