svgmockups

How to insert image in a mock up?

In a laptop mockup or a phone mockup or others any kind of mockup, I want to insert an external image is there any script PHP or javascript like my idea? I already found some site are doing same. How do I build it? Can anyone give me some idea?

My example site is http://magicmockups.com/mockup/10/

Solution

  • You can use Imagemagick's perspective distortion after you measure the corners in both images.

    Background:

    enter image description here

    Image:

    enter image description here

    Command (Unix syntax):

    convert background.png \
\( monet2.jpg -virtual-pixel none +distort perspective "0,0 317,99  265,0 540,85  265,333 594,426  0,333 342,446" \) \
-layers merge +repage monet2_background.jpg


    If on Windows, remove the \ before ( and before ) and change the end of line \ to ^.

    Result: enter image description here

    You can run this from PHP exec() or recode it in PHP Imagick syntax.