PHP help -- imagecopymerge()

Factual Questions
1

Hey guys-

I’m working on a PHP site for a company that produces t-shirts. On the inventory display page, they want to move from an image of the design to an image of the design as it would appear on a t-shirt. Makes sense.

I have three blank tshirt images (black.jpg, white.jpg, grey.jpg), and literally thousands of display images (4558.jpg, etc). I’d really rather not manually merge all the possible combinations in Photoshop (black 4558, white 4558, etc) so I’ve been looking into imagecopymerge() in PHP to do this for me.

Here’s what I’m working with so far:


<?php
header('Content-type: image/jpeg');

$color = $_GET["color"]. ".jpg";
$design = $_GET["design"]. ".jpg";

// resize the $design file to half size, store it in $overlay
$overlay = imagecreatetruecolor(175, 207);
$source = imagecreatefromjpeg($design);
imagecopyresized($overlay, $source, 0, 0, 0, 0, 175, 207, 350, 415);

$shirt = imagecreatefromjpeg($color);
imagecopymerge($shirt, $overlay, 85, 70, 0,0, 175, 207, 100);
imagejpeg($shirt);
imagedestroy($shirt);
?>

Here’s my test shirt file and my test overlay. When I set the last parameter of imagecopymerge() to 100, I get this. When I change it to 50 (if I’m understanding the purpose of that parameter correctly), I get this.

I think you can see what the problem is. I want to make the white background on the overlay transparent against the color of the shirt, without affecting the other colors at all. Any help would be greatly appreciated! :slight_smile:

2

You need to use a paletted image (like a GIF or PNG) which has transparency on it already.

You can try to use imagecolortransparent() setting it to white, but this will most likely not look all that good, since there will be some anti-aliasing that blurs the white into the image, giving you a halo effect. And since the original is a JPG, there’s no guarantee that all of the sections which look white are actually solid white. One bit off of pure white and it won’t be considered transparent.

So you need to

A) Make the image with hard, pixelated edges, and a single color that can be used as the transparent color (magenta FF00FF, is often used.)
B) To set that color to transparent before saving as either a PNG or GIF.
C) Merging with the t-shirt in your code.
D) Optionally shrinking the image so that the pixelated edges disappear.

I would recommend that the first time you make the composite, the code saves the image out to a file, and reuses it on further requests–if you have a lot of people browsing the site.

  • Note that this page says that PNG supports full alpha blending, not just a single color to be made the transparent. I wouldn’t personally trust that PHP would handle this. You’re better off to use GIFs.
3

Good info, thank you!

The problem I’m going to face is that we’ve already got, literally, thousands of JPG files. Maybe there’s a way to set up some kind of automation – iterate through the images directory in a PHP script, open a JPG, and save it as a PNG? From there, I guess it’s just a matter of going through and setting transparency on each individual one?

For the most part, they’re pretty professional images – a white background should be entirely white; though, with JPG compression, I suppose that may no longer be the case. I don’t think I quite understand alpha blending… is it possible to tell PHP to treat a range of colors as transparent, not just pure white? ie- can I say “set everything from 240,240,240 to 255,255,255 to transparent”?

As you can tell, my graphics knowledge is existant, but very minimal. I do appreciate the help, though. Ignorance is being fought today, for sure! :smiley:

4

Your problem is that if you don’t have the original alpha mask that defines the transparent parts, you will not be able to strip out the white background in a sufficiently practical way.

If you zoom into one of your images, you will find that the transition from the white background to the image portion is not a hard edge, but a few blurry pixels that contain a mixture of colors. This is called antialiasing, a blending of the background and foreground at the edges.

When you attempt to remove the white backgrounds and place the newly transparent image against a dark background, a light edge will still be visible. To use the transparent image on a different background color, you will need to antialias the image again against the new background.

You really need to go back to the original photoshop files if they exists and resave all images as transparent png using the alpha mask that is hopefully contained in the Photoshop file.

If the original hi-res files do not contain a mask, you may still be able to strip the background at this stage as it is much easier to to with a hi-res image than with one that has been scaled for web use. But even then, removing backgrounds is not a one-button operation. The more care you put in, the more professional the end result will be.

If you are able to recreate all the image file as png, you may also want to consider a Flash solution for the display of the images. Flash can overlay transparent png files very quickly and a UI could be created to allow the user to switch shirt colors without having to reload pages and process images on the server.

Good luck. There is no easy way to do what you want to do, but if you take the time to do it right, you are creating a real competitive advantage for your company, so if you put it in that perspective, it may well be worth the time.