EllisLab text mark
Advanced Search
1 of 3
1
   
Image lib PNG transparency doesn’t work
Posted: 18 February 2008 11:37 AM
Avatar
Joined: 2006-04-20
712 posts

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 

Un blog seo white-hat expliquant quelques techniques intéressantes sur le seo black hat

Ionize CMS - Webdesigner CMS based on CodeIgniter
http://www.ionizecms.com

My website: Webagency Too Pixel

 
Posted: 26 April 2008 04:42 AM   [ # 1 ]   [ Rating: 0 ]
Joined: 2008-04-25
6 posts

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.

 
Posted: 26 April 2008 04:02 PM   [ # 2 ]   [ Rating: 0 ]
Avatar
Joined: 2006-03-23
3194 posts

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

 
Posted: 27 April 2008 10:10 AM   [ # 3 ]   [ Rating: 0 ]
Joined: 2008-04-25
6 posts

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

Greetings - mandelkern

 
Posted: 27 April 2008 11:24 AM   [ # 4 ]   [ Rating: 0 ]
Avatar
Joined: 2006-03-23
3194 posts

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

 
Posted: 27 April 2008 05:30 PM   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2006-04-20
712 posts

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 

Un blog seo white-hat expliquant quelques techniques intéressantes sur le seo black hat

Ionize CMS - Webdesigner CMS based on CodeIgniter
http://www.ionizecms.com

My website: Webagency Too Pixel

 
Posted: 27 April 2008 05:44 PM   [ # 6 ]   [ Rating: 0 ]
Avatar
Joined: 2006-03-23
3194 posts

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

 
Posted: 27 April 2008 06:41 PM   [ # 7 ]   [ Rating: 0 ]
Avatar
Joined: 2006-04-20
712 posts

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

 Signature 

Un blog seo white-hat expliquant quelques techniques intéressantes sur le seo black hat

Ionize CMS - Webdesigner CMS based on CodeIgniter
http://www.ionizecms.com

My website: Webagency Too Pixel

 
Posted: 27 April 2008 06:58 PM   [ # 8 ]   [ Rating: 0 ]
Avatar
Joined: 2006-03-23
3194 posts

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

 
Posted: 27 April 2008 11:09 PM   [ # 9 ]   [ Rating: 0 ]
Avatar
Joined: 2006-03-23
3194 posts

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

 
Posted: 28 April 2008 07:00 PM   [ # 10 ]   [ Rating: 0 ]
Avatar
Joined: 2006-04-20
712 posts

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_idfalse);
       
imageSaveAlpha($watermarkfile_idtrue);
    
       
$fileType strtolower(substr($sourcefilestrlen($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_id0000,
                               
$sourcefile_width$sourcefile_height);
           
           
// copy the source_id int
           
$sourcefile_id $tempimage;
       
}
    
       imagecopy
($sourcefile_id$watermarkfile_id$dest_x$dest_y00,
                           
$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 

Un blog seo white-hat expliquant quelques techniques intéressantes sur le seo black hat

Ionize CMS - Webdesigner CMS based on CodeIgniter
http://www.ionizecms.com

My website: Webagency Too Pixel

 
Posted: 08 May 2008 07:56 PM   [ # 11 ]   [ Rating: 0 ]
Joined: 2007-02-16
16 posts

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.7.2 | Turnkey Linux | OS X | Textmate | VM Ware

 
Posted: 08 May 2008 08:02 PM   [ # 12 ]   [ Rating: 0 ]
Avatar
Joined: 2006-04-20
712 posts

You are welcome wink

 Signature 

Un blog seo white-hat expliquant quelques techniques intéressantes sur le seo black hat

Ionize CMS - Webdesigner CMS based on CodeIgniter
http://www.ionizecms.com

My website: Webagency Too Pixel

 
Posted: 08 May 2008 08:40 PM   [ # 13 ]   [ Rating: 0 ]
Avatar
Joined: 2002-06-03
6547 posts

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 
 
Posted: 09 May 2008 06:45 AM   [ # 14 ]   [ Rating: 0 ]
Avatar
Joined: 2006-04-20
712 posts

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

 Signature 

Un blog seo white-hat expliquant quelques techniques intéressantes sur le seo black hat

Ionize CMS - Webdesigner CMS based on CodeIgniter
http://www.ionizecms.com

My website: Webagency Too Pixel

 
Posted: 09 May 2008 11:03 AM   [ # 15 ]   [ Rating: 0 ]
Avatar
Joined: 2002-06-03
6547 posts

Thanks!

 Signature 
 
1 of 3
1