如何将图像放在图像上并调整大小并拖动

Question

I want to implement customize mug design with PHP, by default there is glass image is there, then user can upload her/his image , the the image will put on the glass, user change resize and move it, like below picture

how can I implement it , any idea? any help about some jquery libraries ....

Answer 1

For image dragging & resizing, you can use the .draggable() & .resizable() functions in jQuery UI.

This is fully customized and you will be able to reach your goal easily.

For image merging, you can use the code from this subject :

<?php
    $dest = imagecreatefrompng('vinyl.png');
    $src = imagecreatefromjpeg('cover2.jpg');

    imagealphablending($dest, false);
    imagesavealpha($dest, true);

    imagecopymerge($dest, $src, 10, 9, 0, 0, 181, 180, 100); //have to play with these numbers for it to work for you, etc.

    header('Content-Type: image/png');
    imagepng($dest);

    imagedestroy($dest);
    imagedestroy($src);

?>

And if you use PHP, also have a look to ImageMagick

Answer 2

Use fabric.js for All your need , It uses canvas under the hood

• there you can set your image on cup
• resize it , drag it
• and save image in dataurl then to any jpeg or png