在图像上应用蒙版，然后使用透明背景保存

Question

我正在开发一个WebApp，它需要一个允许用户

的功能

1. 从图库中选择图片
2. 在上面涂上面膜
3. 将其保存为透明背景的png图像

有什么办法吗？ jQuery的？ HTML5画布？

我尝试使用来自this site的context.drawimage（）的HTML5画布，它在屏幕上完美显示但是当我调用canvas.toDataURL（）时，它出现了一个空白图像。有人可以帮忙吗？欢迎任何建议。提前谢谢。

Answer 1

出于安全原因，您无法从不在您网域中的图片中获取数据。这可能是您获得空白图像的原因，您应该检查浏览器控制台。

如果您需要详细信息Why does canvas.toDataURL() throw a security exception?

，可以阅读此主题

无论如何，是的canvas将像素存储到rgba数组中，因此您可以拥有透明背景。以这种方式使用它：

    var img = document.createElement("img");
    img.src = cvs.toDataURL("image/png");

如果您需要高级帮助，请不要忘记发布您的代码。我希望我的建议足够，祝你好运！