jQuery插件合并两张图片并保存结果一张？

【问题标题】：jQuery plugin to merge two images and save the resulting one?jQuery插件合并两张图片并保存结果一张？
【发布时间】：2012-08-14 15:00:19
【问题描述】：

我正在做一些需要以下内容的事情：

有一个带有特定页眉和页脚的图像，用作一种模板/背景
用户需要能够上传图像、裁剪图像并将其拖到模板上，并在理想情况下定位它
新图像被保存

你们中是否有人碰巧知道一两个可以实现此功能的插件？我有一些使用 jCrop 的东西，但我自己完成了图像合并的东西，它不是很好。我更喜欢更强大的东西，所以最好有一个独立的插件。

谢谢

【问题讨论】：

Javascript 无法写入图像。任何解决方案都必须调用后端服务，该服务获取组件并在服务器端组合它们。
抱歉应该更清楚。我知道，我现在使用的解决方案是使用 PHP 的 GD 库。

标签： php jquery image merge

【解决方案1】：

您可以使用 HTML5 Canvases 实现类似的效果，但它并不优雅，显然不适用于所有浏览器。

想法是将这些图像简单地绘制到画布上，然后将img 对象设置为画布的源

要将画布绘图保存为图像，我们可以设置图像对象到图像数据 URL。从那里，用户可以右键单击在图像上将其保存到本地计算机。或者，你还可以使用图像数据 url 打开一个新的浏览器窗口直接，用户可以从那里保存它。

// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();

// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById("canvasImg").src = dataURL;

查看完整教程here

【讨论】：