Part of the EllisLab Network
   
1 of 2
1
Image lib PNG transparency doesn’t work
Posted: 18 February 2008 10:37 AM   [ Ignore ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  661
Joined  04-20-2006

Hi,

Watermarking with an overlay transparent 24 bits PNG does not work as expected (After applying the watermark, the transparency of the overlay image is lost on the result image, it’s filled with black where it should be transparent)

 Signature 

All CodeIgniter resources in 1 place?
http://www.codeigniterdirectory.com (Did you know we are converting this directory to Linkster? We need a Graphic designer, join us!)

My website: Création de sites Genève, Too Pixel

Profile
 
 
Posted: 26 April 2008 02:42 AM   [ Ignore ]   [ # 1 ]  
Summer Student
Total Posts:  6
Joined  04-25-2008

I found a possible solution at http://www.webdeveloper.com/forum/showthread.php?t=178210.

Nearly at line

514 - $dst_img = $create($this->width, $this->height);

I changed the code this way:

//$dst_img = $create($this->width, $this->height);

/* TRANSPARENT PNG */
$dst_img = imagecreatetruecolor($this->width, $this->height);
$transparent = imagecolorallocatealpha($dst_img,0,255,0,127);
imagefill($dst_img,0,0,$transparent);

$copy($dst_img, $src_img, 0, 0, $this->x_axis, $this->y_axis, $this->width, $this->height, $this->orig_width, $this->orig_height);

imageAlphaBlending($dst_img, false);
imageSaveAlpha($dst_img, true);

..and now it works.

Profile
 
 
Posted: 26 April 2008 02:02 PM   [ Ignore ]   [ # 2 ]  
Administrator
Avatar
RankRankRankRankRankRank
Total Posts:  6566
Joined  03-23-2006

Excellent mandelkern.

Question, will this wipe out ALL greens from an image?  Have you tested with an image that has #00FF00 in it?

Derek

 Signature 

DerekAllard.com - CodeIgniter, ExpressionEngine, and the World of Web Design
BambooInvoice - Open Source, CodeIgniter powered invoicing.

Profile
MSG
 
 
Posted: 27 April 2008 08:10 AM   [ Ignore ]   [ # 3 ]  
Summer Student
Total Posts:  6
Joined  04-25-2008

I’ve just tested it with an #00FF00-image. The green part is still visible and transparency worked.

Greetings - mandelkern

Profile
 
 
Posted: 27 April 2008 09:24 AM   [ Ignore ]   [ # 4 ]  
Administrator
Avatar
RankRankRankRankRankRank
Total Posts:  6566
Joined  03-23-2006

I’ve just tested this locally, and without making any changes to CI, the following works for me perfectly.

$this->load->library('image_lib');
        
        
$config['source_image'] = './test.png';
        
$config['wm_type'] = 'overlay';
        
$config['wm_opacity'] = '70';
//        $config['dynamic_output'] = TRUE;
        
        
$config['wm_overlay_path'] = './test_over.png';
        
        
$this->image_lib->initialize($config);
        
        
$this->image_lib->watermark();
            
        echo
'<div style="background: blue;"><img src="../test.png" /></div>';

Which image library and version are you each using?

 Signature 

DerekAllard.com - CodeIgniter, ExpressionEngine, and the World of Web Design
BambooInvoice - Open Source, CodeIgniter powered invoicing.

Profile
MSG
 
 
Posted: 27 April 2008 03:30 PM   [ Ignore ]   [ # 5 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  661
Joined  04-20-2006

Derek did you test with a transparent PNG as overlay?
Because for me a transparent PNG just became filled with black background instead of staying transparent after rendering, even with your code above.

I am using PHP 5.2.1 and the GD library version 2.0.28

 Signature 

All CodeIgniter resources in 1 place?
http://www.codeigniterdirectory.com (Did you know we are converting this directory to Linkster? We need a Graphic designer, join us!)

My website: Création de sites Genève, Too Pixel

Profile
 
 
Posted: 27 April 2008 03:44 PM   [ Ignore ]   [ # 6 ]  
Administrator
Avatar
RankRankRankRankRankRank
Total Posts:  6566
Joined  03-23-2006

GD 2.0.34 here.  Now that I fine check, it was an 8bit png and not a 24 bit.  Care to post your overlay image so I can double check then commit?

 Signature 

DerekAllard.com - CodeIgniter, ExpressionEngine, and the World of Web Design
BambooInvoice - Open Source, CodeIgniter powered invoicing.

Profile
MSG
 
 
Posted: 27 April 2008 04:41 PM   [ Ignore ]   [ # 7 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  661
Joined  04-20-2006

Of course I was talking about a 24 bit PNG!
Image sent to you by PM.

 Signature 

All CodeIgniter resources in 1 place?
http://www.codeigniterdirectory.com (Did you know we are converting this directory to Linkster? We need a Graphic designer, join us!)

My website: Création de sites Genève, Too Pixel

Profile
 
 
Posted: 27 April 2008 04:58 PM   [ Ignore ]   [ # 8 ]  
Administrator
Avatar
RankRankRankRankRankRank
Total Posts:  6566
Joined  03-23-2006

Darn.  Could you post it on the net, or email it to me.  I don’t want the forum software getting in the way.

 Signature 

DerekAllard.com - CodeIgniter, ExpressionEngine, and the World of Web Design
BambooInvoice - Open Source, CodeIgniter powered invoicing.

Profile
MSG
 
 
Posted: 27 April 2008 09:09 PM   [ Ignore ]   [ # 9 ]  
Administrator
Avatar
RankRankRankRankRankRank
Total Posts:  6566
Joined  03-23-2006

OK, this must have something to do with versions of GD… I’m not sure.  My results, using elitemedias sample, are identical both before I implemented the changes you suggested, and again after them.

Before mod and After mod

I’ve posted the images and code used (here) if anyone wants to try to reproduce.

$this->load->library('image_lib');
        
$config['source_image'] = './flower.jpg';
$config['wm_overlay_path'] = './png24-watermark.png';
$config['wm_type'] = 'overlay';
$config['dynamic_output'] = TRUE;
        
$this->image_lib->initialize($config);

$this->image_lib->watermark();

 Signature 

DerekAllard.com - CodeIgniter, ExpressionEngine, and the World of Web Design
BambooInvoice - Open Source, CodeIgniter powered invoicing.

Profile
MSG
 
 
Posted: 28 April 2008 05:00 PM   [ Ignore ]   [ # 10 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  661
Joined  04-20-2006

I reproduce the test with the latest CI version from SVN (r1064)
I get the same result as you Derek, but like you can see, it looks bad, the transparency is absolutely not kept and the overlay picture looks not good.

Here is the test result before and after

I run also some test using a watermarker plugin that I already been talked with you some time ago Derek, and the result looks exactly how it is expected to be, here is the result with this plugin:
http://www.webready.fr/uploads/flower_watermarker-plugin.jpg

As you can see, the plugin render is perfect, so maybe you will use the plugin code to solve the bug in CI. I am honest with you: I had a look at CI’s image lib tried to put in the watermarker code to solve the bug but I get no success, so maybe you will just do it better than me.

Here is the code of the plugin:
/applications/plugins/watermarker_pi.php

<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');

    function
watermark($sourcefile, $watermarkfile) {
      
       
#
       # $sourcefile = Filename of the picture to be watermarked.
       # $watermarkfile = Filename of the 24-bit PNG watermark file.
       #
       
       //Get the resource ids of the pictures
       
$watermarkfile_id = imagecreatefrompng($watermarkfile);
       
       
imageAlphaBlending($watermarkfile_id, false);
       
imageSaveAlpha($watermarkfile_id, true);
    
       
$fileType = strtolower(substr($sourcefile, strlen($sourcefile)-3));
    
       switch(
$fileType) {
           
case('gif'):
               
$sourcefile_id = imagecreatefromgif($sourcefile);
               break;
               
           case(
'png'):
               
$sourcefile_id = imagecreatefrompng($sourcefile);
               break;
               
           default:
               
$sourcefile_id = imagecreatefromjpeg($sourcefile);
       
}
    
       
//Get the sizes of both pix  
      
$sourcefile_width=imageSX($sourcefile_id);
      
$sourcefile_height=imageSY($sourcefile_id);
      
$watermarkfile_width=imageSX($watermarkfile_id);
      
$watermarkfile_height=imageSY($watermarkfile_id);
       
       
$dest_x = $sourcefile_width - $watermarkfile_width;
       
$dest_y = $sourcefile_height - $watermarkfile_height;
       
       
// if a gif, we have to upsample it to a truecolor image
       
if($fileType == 'gif') {
           
// create an empty truecolor container
           
$tempimage = imagecreatetruecolor($sourcefile_width, $sourcefile_height);
           
           
// copy the 8-bit gif into the truecolor image
           
imagecopy($tempimage, $sourcefile_id, 0, 0, 0, 0,
                               
$sourcefile_width, $sourcefile_height);
           
           
// copy the source_id int
           
$sourcefile_id = $tempimage;
       
}
    
       imagecopy
($sourcefile_id, $watermarkfile_id, $dest_x, $dest_y, 0, 0,
                           
$watermarkfile_width, $watermarkfile_height);
    
       
//Create a jpeg out of the modified picture
       
switch($fileType) {
       
           
// remember we don't need gif any more, so we use only png or jpeg.
           // See the upsaple code immediately above to see how we handle gifs
           
case('png'):
               
imagepng ($sourcefile_id, $sourcefile);
               break;
               
           default:
               
imagejpeg ($sourcefile_id, $sourcefile);
       
}          
      
       imagedestroy
($sourcefile_id);
       
imagedestroy($watermarkfile_id);
       
       
    
}

?>

And here is the code used in the Controller to test:

<?php

class Png_test extends Controller {

    
function Png_test()
    
{
        parent
::Controller();    
    
}
    
    
function index()
    
{
        $this
->load->plugin('watermarker');
        
        
$sourcefile    = './uploads/flower.jpg';
        
$watermarkfile = './uploads/png24-watermark.png';
        
        
watermark($sourcefile, $watermarkfile);        

    
}
}
?>

 Signature 

All CodeIgniter resources in 1 place?
http://www.codeigniterdirectory.com (Did you know we are converting this directory to Linkster? We need a Graphic designer, join us!)

My website: Création de sites Genève, Too Pixel

Profile
 
 
Posted: 08 May 2008 05:56 PM   [ Ignore ]   [ # 11 ]  
Grad Student
Rank
Total Posts:  32
Joined  02-16-2007

Hi Elitemedia

Many thanks for your post, I was also having trouble with GD and watermarking. It may well be a GD lib version as I also have 2.0.28 on my very old test system.

I tried your plugin and it works for me, so thanks again for posting.

 Signature 

I fold for Code Igniter
You can join us

CI 1.6.1 | RedHat | OS X | Textmate | Parallels | VM Ware

Profile
 
 
Posted: 08 May 2008 06:02 PM   [ Ignore ]   [ # 12 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  661
Joined  04-20-2006

You are welcome wink

 Signature 

All CodeIgniter resources in 1 place?
http://www.codeigniterdirectory.com (Did you know we are converting this directory to Linkster? We need a Graphic designer, join us!)

My website: Création de sites Genève, Too Pixel

Profile
 
 
Posted: 08 May 2008 06:40 PM   [ Ignore ]   [ # 13 ]  
Administrator
Avatar
RankRankRankRankRankRankRank
Total Posts:  15221
Joined  06-03-2002

I remember looking at this in 2006, and thinking to myself “make sure you look at this again when you have time.”  ><

elitemedia, do you mind filing a report in the bug tracker for this, so it does not get neglected for the 1.6.2 release?  I’ve been whittling at the bug tracker this week, and it’s probably about time that we add support for alpha transparency.

 Signature 
Profile
MSG
 
 
Posted: 09 May 2008 04:45 AM   [ Ignore ]   [ # 14 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  661
Joined  04-20-2006

Done:
http://codeigniter.com/bug_tracker/bug/4506/

 Signature 

All CodeIgniter resources in 1 place?
http://www.codeigniterdirectory.com (Did you know we are converting this directory to Linkster? We need a Graphic designer, join us!)

My website: Création de sites Genève, Too Pixel

Profile
 
 
Posted: 09 May 2008 09:03 AM   [ Ignore ]   [ # 15 ]  
Administrator
Avatar
RankRankRankRankRankRankRank
Total Posts:  15221
Joined  06-03-2002

Thanks!

 Signature 
Profile
MSG
 
 
   
1 of 2
1
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 719, on June 06, 2008 10:16 AM
Total Registered Members: 62395 Total Logged-in Users: 16
Total Topics: 76618 Total Anonymous Users: 1
Total Replies: 413821 Total Guests: 377
Total Posts: 490439    
Members ( View Memberlist )
Newest Members:  iopenerNguyen Van ChinhpoplaxO1egericschmittsaiyamtim farleyBill FishernEJCSpiff