1

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

4

2 回答 2

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();
​

现场演示

于 2012-10-07T08:00:30.967 回答
0

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

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

于 2012-10-06T13:07:29.480 回答