How to merge images if in image color white get transparency status white color?
I have this situation:
I need this result:
This is not a best result, since I didn't know better method to achieve this. Here is my result:
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 :)
You need to use a program like Gimp, add a transparency layer, delete the white from the firefox image, and save as PNG.
Related
I would like to know if it is possible to use PHP to create an embossing effect on a user uploaded logo.
The effect (according to the Photoshop department) could be achieved by transforming the contents of the logo to all black (so it will be one color), and make that 'layer' 5% filled (so basically it becomes 95% transparent). After that they would add a black border to the top/left/right edges of the logo, and a white border to the bottom edge of the logo. And just the edges, not the outside of the image itself; the edges of the content of the logo needs to be traced.
As I am not well known in image processing, I was wondering if some PHP expert could help me out/point me in the right direction on how to do this?
So to sum it up, what I need is 4 things:
Convert contents of image to all black (but keep transparency)
Make the image 95% transparent
Add a black border to the top/left/right edges of contents of image
Add a white border to the bottom edges of contents of image
If this could be achieved in CSS for browsers from IE10 and up, it would be a good solution as well. Thanks in advance!
EDIT
Here is an example of a logo created by the artists, on top of an image/background/pattern: http://picpaste.com/embos-example-ngxfSAj5.png - they did it in a bit different way as they first told me they would do :) in Photoshop they added a inner shadow in black from the top to down, and a drop shadow in white from bottom to top
It seems I was not asking the right questions.. When translating the effect from Dutch (Preeg) to English, I thought I was in need of an embossing effect.. But I found that the PHP function shadeImage was what I wanted. In order to help other people, I'll post what I did to achieve this.
To use shadeImage, you have to supply a black/white image. That is where I went wrong when first trying out that function. So I first made a function to translate an image to black/grey/white, based on the alpha channel of each pixel. After that I used shadeImage. The resulting image did have a background, that had to be removed. I tried using things like paintTransparentImage, but that did not work in all my tests, so I made a custom function, by looping over each pixel once again. And finally I set all pixels to an alpha channel value of 0.35, to make the image a bit 'softer' and usable on a background. Here is the complete function:
public function createEmbossedLogo($imagePath, $embossedFilePath) {
// initialize Imagick and load the image
$imagick = new \Imagick(realpath($imagePath));
// make sure we are using PNG, so we can use the alpha channel
$imagick->setImageFormat('png');
// resize the logo, so we do not have to process too many pixels
$imagick->resizeImage(200, null,\Imagick::FILTER_CATROM,1);
// if the image does not have any margin around the content,
// the shade would be cut off at the sides,
// so we add an invisible border of 5 pixels, to add some margin
$imagick->borderImage('rgba(255,0,0,0)',5, 5);
// now we have to convert the image to a black/white image, using only the alpha channel
// and use the alpha channel value as the R/G/B channel values
// load the pixels of the image
$imageIterator = $imagick->getPixelIterator();
foreach ($imageIterator as $row => $pixels) { /* Loop through pixel rows */
foreach ($pixels as $column => $pixel) { /* Loop through the pixels in the row (columns) */
/** #var $pixel \ImagickPixel */
$nor_color = $pixel->getColor(true); //normalized color
// the alpha channel will be 0 if it is completely invisible and 1 if visibile
// but can be any value in between 0-1
// by using the alpha channel as the white/grey/black value, we create an alpha map
$alpha = $nor_color['a'];
$rgbValue = $alpha*255;
$pixel->setColor('rgba('.$rgbValue.','.$rgbValue.','.$rgbValue.',1');
}
$imageIterator->syncIterator(); /* Sync the iterator, this is important to do on each iteration */
}
// add the shading, the first parameter makes sure that all the 'to be removed' pixels
// are the same color, so we can find them in the next loop through all pixels
// they would otherwise be black, one of the colors we do need to keep in the result
$imagick->shadeImage(true,270,45);
// the shadeImage function will make all the pixels grey that should be transparent
// so we loop over all the pixels in the image once again to remove them
$imageIterator = $imagick->getPixelIterator();
$colorFound = false;
$colorRange = 10;
foreach ($imageIterator as $row => $pixels) { /* Loop through pixel rows */
foreach ($pixels as $column => $pixel) { /* Loop through the pixels in the row (columns) */
/** #var $pixel \ImagickPixel */
$color = $pixel->getColor(); //normalized color
if (!$colorFound) {
// since added some margin around the image, we can take the first pixel
// of the top left corner, and use it as the color to make transparent
// and since the image is in black/white, we only need one 'color' channel
$colorFound = array();
$colorFound['r'] = $color['r'];
}
// the default alpha for pixels to keep is 1
$alpha = 1;
// see if the color of this pixel is close to that of the 'color to be deleted'
// if so, we will not totally delete it, but change the alpha channel accordingly
$diff = abs($color['r']-$colorFound['r']);
if ($diff<=$colorRange) {
// set alpha value for this pixel, based on the difference from the removed color
$alpha = $diff / $colorRange;
}
// the entire opacity of the image has to brought down, to make the image a bit 'softer'
$alpha *= 0.35;
// this pixel matches the 'to be removed' color, so we set it to a new value with alpha 0
$pixel->setColor('rgba('.$color['r'].','.$color['g'].','.$color['b'].','.$alpha.')');
}
$imageIterator->syncIterator(); /* Sync the iterator, this is important to do on each iteration */
}
// remove any excess margins that are not needed
$imagick->trimImage(0);
// store the image
$imagick->writeImage($embossedFilePath);
}
Im working on a template for a website that has already more than 50,000 articles and images assigned to every article.
Before now the article image was visible only inside every article, but now I would like to use thumbnails.
I don't have access to modify the upload image form, so the solution should be something like virtual thumbs created from the original images...
What will be the best approach in this case?
Using Mr. Thumb like I advised a simple script to get it working would be
<?php
include './mrthumb.class.php';
// The image you are resizing. Can be a local path as well.
$image = $_GET['i'];
$quality = 100; // percent
// In this example we are resizing the image in proportionate sizes.
// Below we are specifying the MAX width and height.
$width = 100; // Pixels
$height = 130; // Pixels
// Start Mr. Thumb v1.0
$mrthumb = new MrThumb();
// Render the image
$mrthumb->render( $image );
// Resize the image proportionately
// $mrthumb->constrain( $width, $height );
$mrthumb->proportion( $width, $height );
// Finally, output the image to the browser!
// Optionally we can save the image to a destination
// $mrthumb->saveto( $destination, $filename, $quality );
$mrthumb->output( $quality );
// Clean up after you are done! ;)
$mrthumb->clear_cache();
?>
Then save that to your web server along with the mrthumb class and call a thumbnail in your webpage like
<img src="./mrthumb.php?i=images/myimage.jpg" alt="My Image" />
I am trying to merge two images in PHP, overlapping each other in the middle like in here : http://i.stack.imgur.com/ejdDQ.jpg
However, I am having no luck.
On the ImageMagick page, they are using this method to do it in the command line:
http://www.imagemagick.org/Usage/photos/#overlap
But since I cannot use exec on my server, I have to do it somehow with the help of the imagick extension installed on the server (http://us1.php.net/manual/en/book.imagick.php).
Is there any way to make this work?
Using the source files from the link and the code below generates the image:
//Load the images
$left = new Imagick(realpath('../images/im/holocaust_tn.gif'));
$right = new Imagick(realpath('../images/im/spiral_stairs_tn.gif'));
$gradient = new Imagick(realpath('../images/im/overlap_mask.png'));
//The right bit will be offset by a certain amount - avoid recalculating.
$offsetX = $gradient->getImageWidth() - $right->getImageWidth();
//When doing the fading of the images, ImageMagick uses "White == show image".
//The gradient is setup with black on the left, white on the right. So the for
//the left image we need to reverse the gradient to make it white on the left.
$negativeGradient = clone $gradient;
$negativeGradient->negateimage(false);
//Fade out the left part
$left->compositeimage(
$negativeGradient,
Imagick::COMPOSITE_COPYOPACITY,
0, 0
);
//Fade out the right part - offset the gradient
//to make it align in the final image
$right->compositeimage(
$gradient,
Imagick::COMPOSITE_COPYOPACITY,
-$offsetX, 0
);
//Create a new canvas to render everything in to.
$canvas = new Imagick();
$canvas->newImage($gradient->getImageWidth(), $gradient->getImageHeight(), new ImagickPixel('black'));
//Blend left half into final image
$canvas->compositeimage(
$left,
Imagick::COMPOSITE_BLEND,
0, 0
);
//Blend Right half into final image
$canvas->compositeimage(
$right,
Imagick::COMPOSITE_BLEND,
$offsetX, 0
);
//Output the final image
$canvas->setImageFormat('png');
header("Content-Type: image/png");
echo $canvas->getImageBlob();
// And Robert is your father's brother.
I'm using ImageMagick to create transparent images from text with PHP.
I would like to know if it's possible (and how) to add a pattern overlay over the generated image.
The idea is to leave the background transparent and to apply the texture over the text :
The actual result:
The desired result:
Any advice would be greatly appreciated.
Use ImagickDraw to create a "draw" object (it's like a layer), then add it over your image. Here's an example:
// create canvas
$draw = new ImagickDraw();
$draw->setfont('/path/to/your/font.ttf');
// load your overlay image
$overlay = new Imagick('/path/to/your/pattern.png');
// define pattern
$draw->pushPattern('myOverlay', 0, 0,
$overlay->getImageWidth(), $overlay->getImageHeight());
// fill canvas with the pattern (tile)
$draw->composite(Imagick::COMPOSITE_COPY, 0, 0,
$overlay->getImageWidth(), $overlay->getImageHeight(), $overlay);
// destroy pattern
$draw->popPattern();
$draw->setFillPatternURL('#myOverlay');
// put text
$draw->setFontSize(100);
$draw->annotation(0, 0, 'My TextImage');
// create your image (800x400)
$output = new Imagick();
$output->newimage(800, 400, 'transparent');
// this will center your canvas
$output->setGravity(Imagick::GRAVITY_CENTER);
// render canvas on this image
$output->drawImage($draw);
$output->setImageFormat('png');
header('Content-Type: image/png');
print $output;
If you want the overlay to be stretched to fit 800x600, then use that size instead of the pattern size when compositing
I am working on improving one of my Facebook apps by allowing the user to upload an image and apply a styled border, or frame to it (i.e. clouds, stars, sky etc). The user chould also be able to save the image, with the border after it has been applied. This explains a little better what I need:
http://zbrowntechnology.info/ImgDisp/imgdisp.php
If you have any other questions or need more details, please let me know.. I'll edit this post.
Use imagecopy(). The example on that page is done using the transparency option with imagecopymerge() but I don't think you need that.
Using imagecopy() you'll specify the X/Y coordinates to use for positioning:
imagecopy( $borderimage, $topimage, 20, 20, 0, 0, $width, $height);
Where $width and $height will be the entire width and height of the top image. You'll want to replace 20 and 20 with the measurement for how much of the border image will be showing around the borders. You will probably have to resize the top image to the exact dimensions you want, or else it might overlap the border a little too far to the right or bottom. (see imagecopyresampled())
Edit:
Here's a rough way to do the whole process (assuming chosenborder.png is the border they chose, and uploadedimage.png is the image they uploaded. If it's a different image type you'll use the corresponding function).
$borderx = 20; // The width of our border
$border = imagecreatefrompng("chosenborder.png");
$topimage = imagecreatefrompng("uploadedimage.png");
$bordersize = getimagesize($border);
$topimagesize = getimagesize($topimage);
/* The new dimensions of topimage. $borderx*2 means we account for
the border on both left and right, top and bottom. */
$newx = $bordersize[0] - ($borderx*2);
$newy = $bordersize[1] - ($borderx*2);
imagecopyresampled( $topimage_scaled, $topimage, 0, 0, 0, 0,
$newx, $newy, $topimagesize[0], $topimagesize[1]);
/* Merge the images */
imagecopy( $border, $topimage_scaled, $borderx, $borderx,
0, 0, $width, $height);
/* Output the image */
imagepng($border, "newimage.png");
/* Free up the memory occupied by the image resources */
imagedestroy($border);
imagedestroy($topimage);
After the user uploads their image, find chosenborder.png and uploadedimage.png, run the above script, then display newimage.png to the user and you're good to go. Just make sure you call imagedestroy() on the temporary image resources or they'll eat up memory.
If you don't want to keep the generated image on your server, you can omit the second argument to imagepng() which will make it send the image information directly as an image to the browser, in which case you'll want to write the correct image HTTP headers.
Client-side solution by using css3:
checkout the css3 property border-image
(dosen't meet the requirement of saving the img with the border)
Server-side solution by merging 2 different images:
<?php
$imgFile = 'img.jpg';
$brdFile = 'brd.jpg';
$img = addBorder($imgFile,$brdFile);
outputImage($img);
function addBorder($imgFile,$brdFile)
{
$img=imagecreatefromjpeg($imgFile);
$brd=imagecreatefromjpeg($brdFile);
$imgSize = getimagesize($imgFile);
$brdSize = getimagesize($brdFile);
//NOTE: the border img MUST be bigger then the src img
$dst_x = ceil(($brdSize[0] - $imgSize[0])/2);
$dst_y = ceil(($brdSize[1] - $imgSize[1])/2);
imagecopymerge ( $brd, $img, $dst_x, $dst_y, 0, 0, $imgSize[0], $imgSize[1] ,100 );
return $brd;
}
function outputImage($img)
{
header('Content-type: image/png');
imagepng($img);
}
?>