jQuery插件合并两个图像并保存生成的图像？

Question

我正在处理需要以下内容的事情：

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

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

由于

Answer 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