Wrapping square image on different offsets

Question

I have a website screenshot which is fixed width and height say 600x400px and now i want this image to merge with other image which has desktop screen on it. Now that screen is not exactly a square or rectangle that means my image need to fit the desktop of the screen. Simply i want to fill my screenshot image in (x1,x2) (y1,y2) coordinates.

enter image description here

What i need is black image needs to fit in the black screen area of Laptop.

I searched Imagick but not sure which function to use. For reference i'm trying to do something like placeit.net

Please help..

@NishantSolanki i know php gd library but not sure which function or method to use to my requirement. — Praveen Govind, Mar 05 '14 at 12:24
check out this link.. http://runnable.com/UnF-tFdudNt1AABt/how-to-resize-an-image-using-gd-library-for-php — Nishant Solanki, Mar 05 '14 at 12:26
@NishantSolanki i think you didn't understood my question. The one you gave is just normal resize of given image. — Praveen Govind, Mar 05 '14 at 12:32
@NishantSolanki nope it's not realted to client side. I'm very sure it's possible with PHP. — Praveen Govind, Mar 05 '14 at 12:38
@NishantSolanki i have added image in question to just let you know what i need. — Praveen Govind, Mar 05 '14 at 12:40
ohh ok.. now I got it...may be you need to check this. **skewing image using gd library**.. http://stackoverflow.com/questions/1650358/how-would-i-skew-an-image-with-gd-library — Nishant Solanki, Mar 05 '14 at 12:47
@NishantSolanki yes skewing is fine but how to place this image and merge with laptop image is what i'm looking for. — Praveen Govind, Mar 05 '14 at 13:00
you need to create several functions for different purposes. It would take some time.. but you will surely find something for merging images.. — Nishant Solanki, Mar 05 '14 at 13:05

Danack · Answer 1 · 2014-03-11T13:41:54.263

Technically, you need to use an affine perspective transformation to convert the image you want to superimpose into the background image. That is a bit hard.

Luckily there is a simpler way in Image Magick where you just define 4 points in a source image space, and then 4 points in the final image space, and Image Magick does all the calculations for you.

Using the image you provided and the code:

<?php

$overlay = new Imagick(realpath("../images/overlay.jpg"));
$imagick = new Imagick(realpath("../images/Screeny.png"));

$overlay->setImageVirtualPixelMethod(Imagick::VIRTUALPIXELMETHOD_TRANSPARENT);

$width = $overlay->getImageWidth();
$height = $overlay->getImageHeight();

$points = array(
    0, 0,              364, 51,   
    $width, 0,         473.4, 23, 
    0, $height,         433.5, 182,  
    $width, $height,    523, 119.4 
);

$overlay->modulateImage(97, 100, 0 );
$overlay->distortImage(Imagick::DISTORTION_PERSPECTIVE, $points, TRUE );

//The offsets should be the minimum of the x and y values
$imagick->compositeImage($overlay, Imagick::COMPOSITE_OVER, 364.5, 23.5);

header("Content-Type: image/png");
echo $imagick->getImageBlob();

produces an image very much like:

picture embedded in other image

btw I would recommend doing this at a higher resolution than required, and then down-sampling, as well as applying a transparent blur to the overlay image, to try and make it look more realistic.

Wrapping square image on different offsets

1 Answers1