how can I put image on image and resize and drag it

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

enter image description here

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

You can use draggable() and resizable() from jQueryUI. There is a lot of options like constraint on a container (your red rectangle for exemple) — Superdrac, May 20 '14 at 10:17
There are some plugins already available for that, e.g: http://codecanyon.net/item/tshirt-designer/full_screen_preview/5714484?ref=jqueryrain Which is not free but as i'm not related to them, so i post link here. I guess you could find other ones using google — A. Wolff, May 20 '14 at 10:17
@ShailParas I dont try anything yet, I want study first then keep on — Yuseferi, May 20 '14 at 10:20
@A.Wolff that is great, but I dont want wordpress plugin, my base is drupal. do you know any raw php jquery method? — Yuseferi, May 20 '14 at 10:22
@zhilevan, did you read my comment ? You can do all that what you want with this: http://jsfiddle.net/mYL2t/ — Superdrac, May 20 '14 at 10:26
@Superdrac yes I read, tnx for you solution, but finally how can I save it? — Yuseferi, May 20 '14 at 10:27
@Superdrac How is he has `720 repetition with 10 silver badge and 30 bronze badges`. He is asking full app code from you? -_- — yeshansachithak, May 20 '14 at 10:43
I didn't say that, he ask for solution to resize & drag image on a model, we give it, and he ask how to save it ? It's not his job to think about "how to save it" ? — Superdrac, May 20 '14 at 10:49
@Superdrac thank you, but can you tell me how can I put this this movable object on another image and merge them? — Yuseferi, May 20 '14 at 11:17
Search on stack, lot of subjects about images merging with differents technologies http://stackoverflow.com/questions/3876299/merging-two-images-with-php — Superdrac, May 20 '14 at 11:26
@Superdrac thank you very much, can you merge your answers in one and post it as answer please, maybe it will be others problem and you complete answer help them — Yuseferi, May 20 '14 at 11:52

score 1 · Accepted Answer · edited May 23 '17 at 12:32

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

score 1 · Answer 2 · answered Feb 22 '17 at 06:59

1

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

answered Feb 22 '17 at 06:59

vijay

10,276
11
64
79

how can I put image on image and resize and drag it

2 Answers2