如何使用javascript在客户端将2个png图像合并为1个？答案

【问题标题】：How to unite 2 png images into 1 on client side using javascript?如何使用javascript在客户端将2个png图像合并为1个？
【发布时间】：2012-09-27 10:11:18
【问题描述】：

所以我的客户端代码接收到两个 PNG 图像。其中之一是半透明的。如何将第一个图像与第二个图像叠加并将其转换为第三个 PNG 文件以供以后使用？它喜欢将它们用作图层来制作 1 张 PNG 图像。有什么办法或任何框架吗？

【问题讨论】：

标签： javascript image canvas png sprite

【解决方案1】：

真的很容易做到。您只需要使用drawImage 将图像分层绘制到画布上。至于保存，您使用toDataURL 它将返回图像的base64 url，然后您可以对其进行任何操作，在新窗口中打开等。但是图像必须来自域代码正在运行以获取数据 url，否则将引发安全异常。 jsfiddle 示例抛出安全异常，因为我只是从两个随机网站中提取图像。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementsByTagName("img");

canvas.width = 400;
canvas.height = 400;
ctx.drawImage(image[0],0,0);
ctx.drawImage(image[1],0,0);

// will raise security exception if not from the same domain as the code.
var newImage = canvas.toDataURL();

Live Demo

【讨论】：

【解决方案2】：

Pixastic 是一个 JavaScript 库，它允许您使用一点 JavaScript 对图像执行各种操作、过滤器和精美效果。要了解有关该库的更多信息，请参阅introduction page。

CamanJS 的主要关注点是使用 HTML5 画布和 Javascript 处理图像。它结合了简单易用的界面和先进高效的图像/画布编辑技术。它也完全独立于库，可以在 jQuery、YUI、Scriptaculous、MooTools 等旁边安全使用。

【讨论】：