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

【问题标题】：how can I put image on image and resize and drag it如何将图像放在图像上并调整大小并拖动它
【发布时间】：2014-07-08 13:07:18
【问题描述】：

我想用 PHP 实现自定义杯子设计，默认情况下有玻璃图像，然后用户可以上传她/他的图像，图像将放在玻璃上，用户更改调整大小并移动它，如下图所示

我怎样才能实现它，有什么想法吗？关于一些 jquery 库的任何帮助 ....

【问题讨论】：

您可以使用 jQueryUI 中的 draggable() 和 resizable()。有很多选项，例如对容器的约束（以红色矩形为例）
已经有一些插件可用，例如：codecanyon.net/item/tshirt-designer/full_screen_preview/… 这不是免费的，但因为我与它们无关，所以我在这里发布链接。我想你可以使用 google 找到其他人
@ShailParas 我还没有尝试任何东西，我想先学习然后继续
拖动 ui 插件 jquery =) 不客气
你想要所有的应用代码吗？

标签： php jquery css

【解决方案1】：

对于图像拖动和调整大小，您可以使用 jQuery UI 中的 .draggable() 和 .resizable() 函数。

这是完全定制的，您将能够轻松实现目标。

对于图像合并，您可以使用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);

如果你使用 PHP，也可以看看ImageMagick

【讨论】：

【解决方案2】：

使用fabric.js 满足您的所有需求，它在引擎盖下使用画布

你可以在杯子上设置你的图像
调整大小，拖动
并将图像保存在 dataurl 中，然后保存到任何 jpeg 或 png

【讨论】：