0

How to merge images if in image color white get transparency status white color?

I have this situation:

http://i31.tinypic.com/2rz5pxc.png

I need this result:

enter image description here

Ian Mustafa
  • 598
  • 4
  • 18
user3797449
  • 35
  • 2
  • 8
  • You can use PHP GD or ImageMagick. Have you tried it? – Ian Mustafa Jul 02 '14 at 12:52
  • I tried with GD but it will give bad result; the edge of transparent image created with GD won't look smooth, [like this result](https://www.dropbox.com/s/iex4s8mxinevimh/Screenshot%202014-07-02%2020.34.36.png). – Ian Mustafa Jul 02 '14 at 13:41
  • hmm i need guidance to start maybe u have something ideas? – user3797449 Jul 02 '14 at 13:47
  • Haven't tried with ImageMagick since I didn't found the method yet. Will give you the result quickly. – Ian Mustafa Jul 02 '14 at 13:50
  • I've tried using ImageMagick and the result is great, very smooth and clean. But we have an issue: since there is part of logo that colored white, it's also removed, [like this result](https://www.dropbox.com/s/d3kmc379g9q8dqt/Screenshot%202014-07-02%2021.24.07.png). But if you really don't mind about it, just let me know and I'll write the full answer. – Ian Mustafa Jul 02 '14 at 14:27
  • Nice. very thanks i don't mind :) – user3797449 Jul 02 '14 at 14:37

2 Answers2

2

This is not a best result, since I didn't know better method to achieve this. Here is my result:

Result Image

Here is the PHP:

<?php

/** Set source image location **/
$baseImageSource    = 'http://q/stock-photos/tux.png';
$overlayImageSource = 'http://q/stock-photos/firefox-logo-small.jpg';

/** Overlay image configuration **/
// Set this value between 0 and 100. 10 will doing great
$fuzz = 10;

// Set position of overlay image, from top and left;
$overlayTop  = 240;
$overlayLeft = 200;


/** Core program **/

// Create Imagick object for source image
$overlayImage = new Imagick( $overlayImageSource );
$finalImage = new Imagick( $baseImageSource );

// Remove overlay image background
$overlayImage->paintTransparentImage(
    $overlayImage->getImagePixelColor( 0, 0 ),
    0, round( $fuzz * 655.35 )
);

// Set image overlay format
$overlayImage->setImageFormat('png');

// Put overlay image to base image
$finalImage->compositeImage(
    $overlayImage, Imagick::COMPOSITE_DEFAULT,
    $overlayLeft,
    $overlayTop
);

// Set output image format
$finalImage->setImageFormat('png');

// Prepare image and publish!
header('Content-type: image/png');
echo $finalImage;

Basically this is just a modification of this answer (to achieve image merger) and this answer (to achieve background removal). The method used to remove background is Imagick::paintTransparentImage(), with Imagick::getImagePixelColor() is used to detect background color. Then we just need to merge both image with Imagick::compositeImage().

But still, this result is far from perfect, especially if you compare it with image processing app like GIMP or Photoshop. But you should give it a try. Hope it helps :)

Community
  • 1
  • 1
Ian Mustafa
  • 598
  • 4
  • 18
1

You need to use a program like Gimp, add a transparency layer, delete the white from the firefox image, and save as PNG.

Upperstage
  • 3,747
  • 8
  • 44
  • 67