Woshiadai Dev Notebook

April 9, 2009

Transparent gif with smooth edge using Imagick

Filed under: PHP, Image Processing

If you have a PNG with transparency and then you want to convert it to a GIF with transparency preserved. Since GIF has only 1-bit transparency, the edge will look jacky. However, if you know a color that will be used as solid background color or an average color for a gradient background, you can still achieve a smooth edge for the transparent gif.

Here is how (assuming the original PNG is circle.png, the edge antialias color is RED):

< ?php
$red = new ImagickPixel('red');
$transparent = new ImagickPixel('transparent');
$im = new Imagick('circle.png');
$im->setImageBorderColor($red);
$im->frameImage($red, 0, 0, 0, 0);
$im->paintOpaqueImage($red, $transparent, 0.0); //replacing RED color with transparent color
$im->setImageFormat(’gif’);
header(’Content-Type: image/gif’);
echo $im;
?>

April 3, 2009

Use Imagick to create images with transparent canvas

Filed under: PHP, Image Processing

update: just found an easier way to create a transparent canvas ;-)
so, you can pretty much ignore all these options listed below now


$im = new Imagick();
$im->newImage(100, 200, new ImagickPixel('transparent')); // use this predefined transparent color string
$im->setImageFormat('png32');
//$im->setImageFormat('gif');
//$im->setImageFormat('jpg'); // note that jpg does not support transparency, so you see a default black background

==== ignore the rest of the post ====

According to ImageMagick Examples canvas page, there are multiple ways to create a transparent canvas.

It is a pity that Imagick PHP library lacks enough documentation, so I had to try my luck with it. For example, I want to create a transparent background, then copy an image with transparency on top of it.


< ?php
try
{
$icon = new Imagick('play.png');

$im = new Imagick();

// put code here to create the transparent canvas, use options below

$im->compositeImage($icon, Imagick::COMPOSITE_COPY, 0, 0);

header(’Content-Type: image/png’);
echo $im;
}
catch (Exception $ex)
{
echo ‘Exception: ‘ . $ex->getMessage() . “\n”;
echo $ex->getTraceAsString();
}
?>

a) setImageOpacity

$im->newImage(200, 200, '#000000', 'png');
$im->setImageOpacity(0.0);

b) paintTransparentImage

$transparent = new ImagickPixel('#000000');
$im->newImage(200, 200, '#000000', 'png');
$im->paintTransparentImage($transparent, 0, 10);

c) matteFloodfillImage

$transparent = new ImagickPixel('#000000');
$im->newImage(200, 200, '#000000', 'png');
$im->setImageBorderColor($transparent);
$im->matteFloodfillImage(0.0, 0.0, $transparent, 200, 200);

d) thresholdImage

$im->newImage(200, 200, '#000000', 'png');
$im->thresholdImage(-1, Imagick::CHANNEL_ALPHA);

e) fxImage

$im->newImage(200, 200, '#000000', 'png');
$im = $im->fxImage('0', Imagick::CHANNEL_ALPHA);

For ImageMagick 6.2.9 12/17/07 Q16, Imagick 2.2.2RC1
a) does not work at all
e) gives the correct result, transparent background for play.png and transparent background for the whole image
others give transparent background for play.png, but black background for the whole image

For ImageMagick 6.4.9-6 2009-03-25 Q16, Imagick 2.2.2
a) b) gives transparent background for play.png and whole image
c) gives an exception
others give white background for play.png, black background for whole image

Images (note that you may want to save the images and open it in a viewer with non-white background to see the difference, especially the last two):

1. Desired ouptput: transparent play button background and transparent canvas:
desired output
2. White play button background and black canvas
white play bg, black canvas
3. Transparent play button background and black canvas
transparent play bg, black canvas






















Get free blog up and running in minutes with Blogsome
Theme designed by Ben de Groot