1

I need to display user-uploaded logos on a background-image. The background of the logo's should be transparent.

The problem is that most users have no knowledge of how to make their images transparent, let alone how to use alpha-transparency, so most logos that are uploaded have a white background.

In Photoshop, displaying these logos on a background works perfectly when you choose 'Darker Color' as the blending mode for the layer.

I'm trying to achieve the same in PHP, so I can make this work without Photoshop.

Any ideas ?

Austin Brunkhorst
  • 20,704
  • 6
  • 47
  • 61
Dylan
  • 9,129
  • 20
  • 96
  • 153

4 Answers4

0

This function seems to suit your needs.

http://www.php.net/manual/en/function.imagecolortransparent.php

Otherwise you'd probably have to loop through all the pixels comparing them to the pixel below and choosing the darker one for your result image.

Insensus
  • 66
  • 5
0

Personally I have had better results with image magick than GD, but it is not available on all platforms http://php.net/manual/en/imagick.painttransparentimage.php

   // Loads image
    $im = new Imagick($source);

    // Apply fuzz
    $im->paintTransparentImage($im->getImagePixelColor(0, 0), 0, $fuzz);

     // Writes image
    $im->setImageFormat('png');
    $im->writeImage($target);
    $im->destroy();

note that $im->getImagePixelColor(0, 0) gets the pixel colour from the top left of image should this should work with any colour BG, adjust $fuzz depending how feathered the logo is, can probably keep it low if it is all straight lines and solid colours

Also http://www.php.net/manual/en/imagick.trimimage.php is very useful for removing empty space in images.

CodeMonkey
  • 3,271
  • 25
  • 50
0

I can think of two possible solutions.

One would be to use pixel blending at the client level with javascript. This can be a bit processor heavy so it probably isn't the best solution especially for mobiles and other light weight devices. There is a library called pixastic, that allows some Photoshop-like blend modes.

The other solution would be to process the uploaded image with gd2 in php and recreate the logo with transparency by replacing the background color. In this case you'd have to know what the background color is that they used. And then what if they also use that same colo in the logo? You wouldn't want to make that transparent also.

Look at the following php functions (among others in the family):

imagealphablending
imagecolortransparent

Personally, I would favor the PHP method that processes the image and makes a permanent file to be reused wherever necessary. But even better yet I just wouldn't rely on the average user to be creating logos.

If you really need to have users creating these sorts of files you should almost make a web-based tool that lets them specify the transparent areas, kind of like the Visual Studio icon editor.

Octopus
  • 8,075
  • 5
  • 46
  • 66
0

I'm not sure as to the internals of PS, but in my own implementation (not in PHP, mind you) I approached the task in the following way:

  1. Extract luma of foreground and background
  2. Compare foreground and background luma to create a pixel mask
  3. Assign output based on the derived mask.

My attempt at generic pseudocode: 

Yfg = FG(:,:,1)*0.299 + FG(:,:,2)*0.587 + FG(:,:,3)*0.114;
Ybg = BG(:,:,1)*0.299 + BG(:,:,2)*0.587 + BG(:,:,3)*0.114;
mask = (Yfg > Ybg);
R = BG(mask) + FG(~mask);

This of course differs from the "Darken" mode, which is just does a relational blend for each RGB channel.

I am not sure how much of a hassle this operation would be in PHP. I'm more familiar with image blending than PHP.

DGM
  • 21
  • 3