| Scaling image is losing background transparency [message #171660] |
Fri, 14 January 2011 18:56  |
laredotornado@zipmail
Messages: 5
Registered: January 2011
Karma: 0
|
Junior Member |
|
|
Hi,
I'm using PHP 5 and trying to scale png images programatically. Here
is what I'm doing ...
$src_img = imagecreatefrompng($imagefile);
$hw = getimagesize($imagefile);
$new_w = $w;
$new_h = $hw["1"]/($hw["0"]/$w);
$dst_img = @imagecreatetruecolor($new_w, $new_h);
if(!$dst_img) {
$dst_img = imageCreate($new_w, $new_h);
}
imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,
$new_h,imagesx($src_img),imagesy($src_img));
imagepng($dst_img);
The problem is my scaled png image loses its background transparency.
The short of this is, does anyone know how to scale PNG images
effectively and what other information can I provide to help
troubleshoot this further?
Thanks, - Dave
|
|
|
|
| Re: Scaling image is losing background transparency [message #171664 is a reply to message #171660] |
Fri, 14 January 2011 23:12  |
Thomas 'PointedEars'
Messages: 701
Registered: October 2010
Karma: 0
|
Senior Member |
|
|
laredotornado(at)zipmail(dot)com wrote:
> I'm using PHP 5 and trying to scale png images programatically. Here
> is what I'm doing ...
>
> $src_img = imagecreatefrompng($imagefile);
> $hw = getimagesize($imagefile);
> $new_w = $w;
> $new_h = $hw["1"]/($hw["0"]/$w);
> $dst_img = @imagecreatetruecolor($new_w, $new_h);
> if(!$dst_img) {
> $dst_img = imageCreate($new_w, $new_h);
> }
> imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,
> $new_h,imagesx($src_img),imagesy($src_img));
> imagepng($dst_img);
>
> The problem is my scaled png image loses its background transparency.
> The short of this is, does anyone know how to scale PNG images
> effectively and what other information can I provide to help
> troubleshoot this further?
I suppose it can be done with the GD library (which you are using), but you
need to preserve the pixels' alpha channel value (that which you misnamed
"background transparency"). There is an imagesavealpha() function that
looks promising.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
|
|
|
|
| Re: Scaling image is losing background transparency [message #171670 is a reply to message #171660] |
Sat, 15 January 2011 03:07 |
Chuck Anderson
Messages: 63
Registered: September 2010
Karma: 0
|
Member |
|
|
laredotornado(at)zipmail(dot)com wrote:
> Hi,
>
> I'm using PHP 5 and trying to scale png images programatically. Here
> is what I'm doing ...
>
> $src_img = imagecreatefrompng($imagefile);
> $hw = getimagesize($imagefile);
> $new_w = $w;
> $new_h = $hw["1"]/($hw["0"]/$w);
> $dst_img = @imagecreatetruecolor($new_w, $new_h);
> if(!$dst_img) {
> $dst_img = imageCreate($new_w, $new_h);
> }
> imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,
> $new_h,imagesx($src_img),imagesy($src_img));
> imagepng($dst_img);
>
> The problem is my scaled png image loses its background transparency.
> The short of this is, does anyone know how to scale PNG images
> effectively and what other information can I provide to help
> troubleshoot this further?
>
> Thanks, - Dave
>
When I was doing transparent png image overlays (on the fly, scaled
watermarks on top of web site images), I found that I had to use
imagecopyresampled as opposed to imagecopymerge or the transparent
overlay would lose it's transparency (sound familiar?). Try using
imagecopyresampled instead of imageycopyresized.
I made a very brief note about it here -
http://cycletourist.com/temp/watermark.php
--
————————————————————————— ————
Chuck Anderson • Boulder, CO
http://cycletourist.com
Turn Off, Tune Out, Drop In
————————————————————————— ————
|
|
|
|
| Re: Scaling image is losing background transparency [message #171679 is a reply to message #171664] |
Sat, 15 January 2011 12:57 |
The Natural Philosoph
Messages: 993
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
Thomas 'PointedEars' Lahn wrote:
> laredotornado(at)zipmail(dot)com wrote:
>
>> I'm using PHP 5 and trying to scale png images programatically. Here
>> is what I'm doing ...
>>
>> $src_img = imagecreatefrompng($imagefile);
>> $hw = getimagesize($imagefile);
>> $new_w = $w;
>> $new_h = $hw["1"]/($hw["0"]/$w);
>> $dst_img = @imagecreatetruecolor($new_w, $new_h);
>> if(!$dst_img) {
>> $dst_img = imageCreate($new_w, $new_h);
>> }
>> imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,
>> $new_h,imagesx($src_img),imagesy($src_img));
>> imagepng($dst_img);
>>
>> The problem is my scaled png image loses its background transparency.
>> The short of this is, does anyone know how to scale PNG images
>> effectively and what other information can I provide to help
>> troubleshoot this further?
>
> I suppose it can be done with the GD library (which you are using), but you
> need to preserve the pixels' alpha channel value (that which you misnamed
> "background transparency"). There is an imagesavealpha() function that
> looks promising.
>
Yes. I made it work here.
I ended up using gif mind you because IE6 couldn't suss tranaparent
background PNG's. Lemme see if I have some code frags somewhere.
Hmm. I remember now. I found the documentation on transparency, opaque.
to say the least. ;-)
$image=imagecreatetruecolor ($needle_width, $needle_height );
imagealphablending($image, true);
//set up arbitrary color for transparent background
$back=imagecolorallocatealpha ($image ,255 , 255 , 255 , 255);
That last but one line seems to be needed or else anything copied into
it loses alpha.
The final line is a 'transparent' colour I created to fill it with.
imagefilledrectangle ($image ,0,0,$backx-1 ,$backy-1, $back );
After some other stuff - copying transparent gifs over it..to build up
a layered picture. I resized and spat it out this way....
$thumbnail=imagecreatetruecolor($newsize,$newsize);
imagecopyresampled($thumbnail,$image,0,0,0,0,$newsize,$newsize,$needle_widt h,$needle_height);
imagecolortransparent ( $thumbnail, $back);
header('content-type: image/gif');
imagegif($thumbnail);
The imagecolortransaprent seems to set that color I set up = $back - to
transparent.
Now some of this may be redundant. I 'fiddled till it worked'
BUT work it does..
So passed on with usual health warnings.
>
> PointedEars
|
|
|
|
| Re: Scaling image is losing background transparency [message #171686 is a reply to message #171679] |
Sat, 15 January 2011 23:12 |
Michael Fesser
Messages: 215
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
.oO(The Natural Philosopher)
> I ended up using gif mind you because IE6 couldn't suss tranaparent
> background PNG's. Lemme see if I have some code frags somewhere.
GIF is completely dead, there's not a single reason to use it anymore.
And IE6 _can_ use even alpha-transparent PNGs if you want. Requires a
little workaround, though. But who really uses IE6 anymore?
Micha
|
|
|
|
| Re: Scaling image is losing background transparency [message #171690 is a reply to message #171686] |
Sun, 16 January 2011 01:15 |
The Natural Philosoph
Messages: 993
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
Michael Fesser wrote:
> .oO(The Natural Philosopher)
>
>> I ended up using gif mind you because IE6 couldn't suss tranaparent
>> background PNG's. Lemme see if I have some code frags somewhere.
>
> GIF is completely dead, there's not a single reason to use it anymore.
> And IE6 _can_ use even alpha-transparent PNGs if you want. Requires a
> little workaround, though. But who really uses IE6 anymore?
>
I do because some people do :-)
And gifs are by and large smaller than pngs.
So save bandwidth.
> Micha
|
|
|
|
| Re: Scaling image is losing background transparency [message #171693 is a reply to message #171690] |
Sun, 16 January 2011 02:48 |
Chuck Anderson
Messages: 63
Registered: September 2010
Karma: 0
|
Member |
|
|
The Natural Philosopher wrote:
> Michael Fesser wrote:
>> .oO(The Natural Philosopher)
>>
>>> I ended up using gif mind you because IE6 couldn't suss tranaparent
>>> background PNG's. Lemme see if I have some code frags somewhere.
>>
>> GIF is completely dead, there's not a single reason to use it anymore.
>> And IE6 _can_ use even alpha-transparent PNGs if you want. Requires a
>> little workaround, though. But who really uses IE6 anymore?
>>
>
> I do because some people do :-)
> And gifs are by and large smaller than pngs.
>
> So save bandwidth.
But look at the difference in quality:
http://cycletourist.com/temp/watermark.php (two overlays at bottom of page).
I did this to make on-the-fly watermark overlays, so I actually output a
jpg at the end, but the png (vs gif) overlays are so much nicer.
--
————————————————————————— ————
Chuck Anderson • Boulder, CO
http://cycletourist.com
Turn Off, Tune Out, Drop In
————————————————————————— ————
|
|
|
|
| Re: Scaling image is losing background transparency [message #171694 is a reply to message #171693] |
Sun, 16 January 2011 03:39 |
The Natural Philosoph
Messages: 993
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
Chuck Anderson wrote:
> The Natural Philosopher wrote:
>> Michael Fesser wrote:
>>> .oO(The Natural Philosopher)
>>>
>>>> I ended up using gif mind you because IE6 couldn't suss tranaparent
>>>> background PNG's. Lemme see if I have some code frags somewhere.
>>>
>>> GIF is completely dead, there's not a single reason to use it anymore.
>>> And IE6 _can_ use even alpha-transparent PNGs if you want. Requires a
>>> little workaround, though. But who really uses IE6 anymore?
>>>
>>
>> I do because some people do :-)
>> And gifs are by and large smaller than pngs.
>>
>> So save bandwidth.
> But look at the difference in quality:
> http://cycletourist.com/temp/watermark.php (two overlays at bottom of
> page).
>
> I did this to make on-the-fly watermark overlays, so I actually output a
> jpg at the end, but the png (vs gif) overlays are so much nicer.
>
That's not a function of the gif per se.
|
|
|
|
| Re: Scaling image is losing background transparency [message #171695 is a reply to message #171694] |
Sun, 16 January 2011 08:29 |
Chuck Anderson
Messages: 63
Registered: September 2010
Karma: 0
|
Member |
|
|
The Natural Philosopher wrote:
> Chuck Anderson wrote:
>> The Natural Philosopher wrote:
>>> Michael Fesser wrote:
>>>> .oO(The Natural Philosopher)
>>>>
>>>> > I ended up using gif mind you because IE6 couldn't suss
>>>> > tranaparent background PNG's. Lemme see if I have some code frags
>>>> > somewhere.
>>>>
>>>> GIF is completely dead, there's not a single reason to use it anymore.
>>>> And IE6 _can_ use even alpha-transparent PNGs if you want. Requires a
>>>> little workaround, though. But who really uses IE6 anymore?
>>>>
>>>
>>> I do because some people do :-)
>>> And gifs are by and large smaller than pngs.
>>>
>>> So save bandwidth.
>> But look at the difference in qulity:
>> http://cycletourist.com/temp/watermark.php (two overlays at bottom of
>> page).
>>
>> I did this to make on-the-fly watermark overlays, so I actually
>> output a jpg at the end, but the png (vs gif) overlays are so much
>> nicer.
>>
> That's not a function of the gif per se.
>
>
Huh? That's exactly what it is. Can you make the transparency in a gif
image look a good as the transparency in a 24 bit png file? I don't
think so. 24 bit png with alpha channel transparency is beyond anything
you can do with a gif file.
--
————————————————————————— ————
Chuck Anderson • Boulder, CO
http://cycletourist.com
Turn Off, Tune Out, Drop In
————————————————————————— ————
|
|
|
|
| Re: Scaling image is losing background transparency [message #171697 is a reply to message #171695] |
Sun, 16 January 2011 12:11 |
The Natural Philosoph
Messages: 993
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
Chuck Anderson wrote:
> The Natural Philosopher wrote:
>> Chuck Anderson wrote:
>>> The Natural Philosopher wrote:
>>>> Michael Fesser wrote:
>>>> > .oO(The Natural Philosopher)
>>>> >
>>>> >> I ended up using gif mind you because IE6 couldn't suss
>>>> >> tranaparent background PNG's. Lemme see if I have some code frags
>>>> >> somewhere.
>>>> >
>>>> > GIF is completely dead, there's not a single reason to use it anymore.
>>>> > And IE6 _can_ use even alpha-transparent PNGs if you want. Requires a
>>>> > little workaround, though. But who really uses IE6 anymore?
>>>> >
>>>>
>>>> I do because some people do :-)
>>>> And gifs are by and large smaller than pngs.
>>>>
>>>> So save bandwidth.
>>> But look at the difference in qulity:
>>> http://cycletourist.com/temp/watermark.php (two overlays at bottom of
>>> page).
>>>
>>> I did this to make on-the-fly watermark overlays, so I actually
>>> output a jpg at the end, but the png (vs gif) overlays are so much
>>> nicer.
>>>
>> That's not a function of the gif per se.
>>
>>
>
> Huh? That's exactly what it is. Can you make the transparency in a gif
> image look a good as the transparency in a 24 bit png file? I don't
> think so. 24 bit png with alpha channel transparency is beyond anything
> you can do with a gif file.
>
That all depends on what is in it: if you select the index values
carefully and its a monochrome, you get no worse results.
There is, after all the same variation in a single colour as is
available with 24 bit.
|
|
|
|
| Re: Scaling image is losing background transparency [message #171708 is a reply to message #171690] |
Mon, 17 January 2011 13:17 |
Michael Fesser
Messages: 215
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
.oO(The Natural Philosopher)
> Michael Fesser wrote:
>> .oO(The Natural Philosopher)
>>
>>> I ended up using gif mind you because IE6 couldn't suss tranaparent
>>> background PNG's. Lemme see if I have some code frags somewhere.
>>
>> GIF is completely dead, there's not a single reason to use it anymore.
>> And IE6 _can_ use even alpha-transparent PNGs if you want. Requires a
>> little workaround, though. But who really uses IE6 anymore?
>>
>
> I do because some people do :-)
> And gifs are by and large smaller than pngs.
Only if you do the PNG wrong. Its algorithm is better and much more
flexible, so if you optimize it correctly, the PNG will _always_ be
smaller.
Micha
|
|
|
|
| Re: Scaling image is losing background transparency [message #171712 is a reply to message #171686] |
Mon, 17 January 2011 21:56 |
Henrik Carlqvist
Messages: 2
Registered: December 2010
Karma: 0
|
Junior Member |
|
|
Michael Fesser <netizen(at)gmx(dot)de> wrote:
> GIF is completely dead, there's not a single reason to use it anymore.
Png with alpha transparency is really better than transparent gif files.
However, is there any good alternative to animated gif files on the web?
Yes, there is apng which in theory might be able to replace animated gifs,
however in practice animated gifs has more widespread support.
Also, the major reason for developing the .png format was that unisys had
a patent for the compression algorithm used in .gif. I don't think that
patent is valid anymore.
regards Henrik
--
The address in the header is only to prevent spam. My real address is:
hc123(at)poolhem.se Examples of addresses which go to spammers:
root@localhost postmaster@localhost
|
|
|
|
| Re: Scaling image is losing background transparency [message #171713 is a reply to message #171712] |
Mon, 17 January 2011 23:38 |
Thomas 'PointedEars'
Messages: 701
Registered: October 2010
Karma: 0
|
Senior Member |
|
|
Henrik Carlqvist wrote:
> Michael Fesser <netizen(at)gmx(dot)de> wrote:
>> GIF is completely dead, there's not a single reason to use it anymore.
Only a Sith deals in absolutes.
> Png with alpha transparency is really better than transparent gif files.
No, it really is not. Meaning, it depends. In many cases you will be
better off (in compatibility, and download size) creating a GIF image
indexed to your needs than supplying a PNGA image. Where compatibility is
concerned, see if you can supply IE6 and 7 (yes, the former is still in use
beyond its end-of-life, and you cannot always convince people/companies to
upgrade) with a corresponding replacement GIF image through Conditional
Comments. Where size is concerned, see which file is smaller and fits best
to your layout (you would choose PNGA over GIF where the image contained
more than 256 different but important colors, or was to be displayed against
a randomly changing background color or image, for example).
> However, is there any good alternative to animated gif files on the web?
Unfortunately, no. And I am sorry to say, in hindsight (and back then,
foresight already), IMHO we have to thank the Mozilla Drivers for that.¹ :-(
> Yes, there is apng which in theory might be able to replace animated gifs,
> however in practice animated gifs has more widespread support.
Indeed. *sigh*
> Also, the major reason for developing the .png format was that unisys had
> a patent for the compression algorithm used in .gif. I don't think that
> patent is valid anymore.
It has expired world-wide in 2003/2004 CE.²
PointedEars
___________
¹ <http://en.wikipedia.org/wiki/APNG>
<https://bugzilla.mozilla.org/show_bug.cgi?id=18574> (please vote for,
but don't spam this bug. TIA.)
² <http://en.wikipedia.org/wiki/GIF#Unisys_and_LZW_patent_enforcement>
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
|
|
|
|
| Re: Scaling image is losing background transparency [message #171722 is a reply to message #171686] |
Tue, 18 January 2011 16:08 |
sheldonlg
Messages: 166
Registered: September 2010
Karma: 0
|
Senior Member |
|
|
On 1/15/2011 6:12 PM, Michael Fesser wrote:
> .oO(The Natural Philosopher)
>
>> I ended up using gif mind you because IE6 couldn't suss tranaparent
>> background PNG's. Lemme see if I have some code frags somewhere.
>
> GIF is completely dead, there's not a single reason to use it anymore.
> And IE6 _can_ use even alpha-transparent PNGs if you want. Requires a
> little workaround, though. But who really uses IE6 anymore?
>
> Micha
The bulk of my work is on intranet applications for a Fortune 500
company. All coding must work on IE6 because they have not yet demanded
that everyone upgrade from IE6. In fact, some of their applications
won't even work on Firefox and require IE (but work on later IE).
--
Shelly
|
|
|
|
Calendar
Search
Help
Members
Register
Login
Home
]