<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Reflection Media &#187; Gabriel</title>
	<atom:link href="http://www.reflectionmedia.ro/author/gabriel/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.reflectionmedia.ro</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Thu, 09 Sep 2010 22:28:00 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Making darkness or brightness transparent</title>
		<link>http://www.reflectionmedia.ro/2009/07/making-darkness-or-brightness-transparent/</link>
		<comments>http://www.reflectionmedia.ro/2009/07/making-darkness-or-brightness-transparent/#comments</comments>
		<pubDate>Mon, 06 Jul 2009 10:28:08 +0000</pubDate>
		<dc:creator>Gabriel</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[alpha]]></category>
		<category><![CDATA[brightness]]></category>
		<category><![CDATA[darkness]]></category>
		<category><![CDATA[transparency]]></category>

		<guid isPermaLink="false">http://www.reflectionmedia.ro/?p=428</guid>
		<description><![CDATA[Let&#8217;s say you have the picture of a flame and you want to change the background. In order to do that you first must make the background transparent. But how can you do that? You can do it by hand using a brush but it&#8217;s not quite the effect I was looking for. So I [...]]]></description>
			<content:encoded><![CDATA[<p>Let&#8217;s say you have the picture of a flame and you want to change the background. In order to do that you first must make the background transparent. But how can you do that? You can do it by hand using a brush but it&#8217;s not quite the effect I was looking for. So I figured there must be a way to automatically adjust the transparency of each pixel depending on it&#8217;s darkness.</p>
<p>This gave me the chance to play around with <a href="http://www.php.net/gd">PHP GD</a>, and I must say I&#8217;m quite impressed. It seems to be a really powerful image processing tool. <a href="http://www.reflectionmedia.ro/wp-content/uploads/2009/07/transparent.zip">Here</a> is the script I came up with, and <a href="http://www.reflectionmedia.ro/projects/gab/alpha/index.php">here</a> it is in action.</p>
<p><div id="attachment_471" class="wp-caption alignnone" style="width: 211px"><img src="http://www.reflectionmedia.ro/wp-content/uploads/2009/07/before-201x300.jpg" alt="Before" title="before" width="201" height="300" class="size-medium wp-image-471" /><p class="wp-caption-text">Before</p></div></p>
<p><div id="attachment_472" class="wp-caption alignnone" style="width: 211px"><img src="http://www.reflectionmedia.ro/wp-content/uploads/2009/07/after-201x300.jpg" alt="After" title="after" width="201" height="300" class="size-medium wp-image-472" /><p class="wp-caption-text">After</p></div></p>
<p>Pretty neat, huh? Here&#8217;s the script so you can see it without having to download the zip file.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// $url: the URL of the image you want to be processed. It can also be a local filename.</span>
<span style="color: #666666; font-style: italic;">// $type: 0 for brightness, anything else for darkness.</span>
<span style="color: #666666; font-style: italic;">// $mode: 0 for theoretical mode, anything else for Photoshop mode.</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> transparent<span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #339933;">,</span> <span style="color: #000088;">$type</span><span style="color: #339933;">=</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #000088;">$mode</span><span style="color: #339933;">=</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #666666; font-style: italic;">// Create the old image</span>
<span style="color: #000088;">$old_image</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecreatefromstring</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">file_get_contents</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Create the new image of the same size as the old one</span>
<span style="color: #990000;">list</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$x_size</span><span style="color: #339933;">,</span> <span style="color: #000088;">$y_size</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">getimagesize</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$new_image</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecreatetruecolor</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$x_size</span><span style="color: #339933;">,</span> <span style="color: #000088;">$y_size</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Turn off alpha blending and set alpha flag for our new image</span>
<span style="color: #990000;">imagealphablending</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$new_image</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagesavealpha</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$new_image</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Do the following for each pixel</span>
<span style="color: #b1b100;">for</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$y</span><span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #000088;">$y</span><span style="color: #339933;">&lt;</span><span style="color: #000088;">$y_size</span><span style="color: #339933;">;</span> <span style="color: #000088;">$y</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">for</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span><span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #000088;">$x</span><span style="color: #339933;">&lt;</span><span style="color: #000088;">$x_size</span><span style="color: #339933;">;</span> <span style="color: #000088;">$x</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// get it's color</span>
		<span style="color: #000088;">$rgb</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecolorat</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$old_image</span><span style="color: #339933;">,</span> <span style="color: #000088;">$x</span><span style="color: #339933;">,</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #666666; font-style: italic;">// and get the R, G and B components of the color</span>
		<span style="color: #000088;">$old_color</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecolorsforindex</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$old_image</span><span style="color: #339933;">,</span> <span style="color: #000088;">$rgb</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$r</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$old_color</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'red'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$g</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$old_color</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'green'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$b</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$old_color</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'blue'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #666666; font-style: italic;">// Define brightness:</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$mode</span><span style="color: #009900;">&#41;</span> <span style="color: #000088;">$brightness</span> <span style="color: #339933;">=</span> <span style="color: #990000;">max</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$r</span><span style="color: #339933;">,</span> <span style="color: #000088;">$g</span><span style="color: #339933;">,</span> <span style="color: #000088;">$b</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// photoshop mode OR</span>
		<span style="color: #b1b100;">else</span> <span style="color: #000088;">$brightness</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">max</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$r</span><span style="color: #339933;">,</span> <span style="color: #000088;">$g</span><span style="color: #339933;">,</span> <span style="color: #000088;">$b</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #990000;">min</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$r</span><span style="color: #339933;">,</span> <span style="color: #000088;">$g</span><span style="color: #339933;">,</span> <span style="color: #000088;">$b</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// theoretical mode</span>
&nbsp;
		<span style="color: #666666; font-style: italic;">// Define darkness:</span>
		<span style="color: #000088;">$darkness</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">255</span> <span style="color: #339933;">-</span> <span style="color: #000088;">$brightness</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #666666; font-style: italic;">// Generate transparence:</span>
		<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$type</span><span style="color: #009900;">&#41;</span> <span style="color: #000088;">$alpha</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$darkness</span> <span style="color: #339933;">/</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// for darkness OR</span>
		<span style="color: #b1b100;">else</span> <span style="color: #000088;">$alpha</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$brightness</span> <span style="color: #339933;">/</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// for brightness</span>
&nbsp;
		<span style="color: #666666; font-style: italic;">// Define the new color, same as the old one, but with alpha transparency</span>
		<span style="color: #000088;">$new_color</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecolorallocatealpha</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$new_image</span><span style="color: #339933;">,</span> <span style="color: #000088;">$r</span><span style="color: #339933;">,</span> <span style="color: #000088;">$g</span><span style="color: #339933;">,</span> <span style="color: #000088;">$b</span><span style="color: #339933;">,</span> <span style="color: #000088;">$alpha</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #666666; font-style: italic;">// Set that color to the pixel in the new image</span>
		<span style="color: #990000;">imagesetpixel</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$new_image</span><span style="color: #339933;">,</span> <span style="color: #000088;">$x</span><span style="color: #339933;">,</span> <span style="color: #000088;">$y</span><span style="color: #339933;">,</span> <span style="color: #000088;">$new_color</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Output image to browser</span>
<span style="color: #990000;">header</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Content-Type: image/png'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagepng</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$new_image</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Destroy all images in the end</span>
<span style="color: #990000;">imagedestroy</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$old_image</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagedestroy</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$new_image</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><strong>Update</strong>: There&#8217;s also a <a href="http://www.powerretouche.com/Transparency_plugin_tutorial.htm">Photoshop plugin</a> for doing something similar, but it costs 27 euros.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.reflectionmedia.ro/2009/07/making-darkness-or-brightness-transparent/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
