jquery - 在图像上应用 mask ，然后将其保存为透明背景

Question

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

1. 从图库中选择一张图片
2. 在上面敷上面膜
3. 保存为透明背景的png图片

有什么办法吗？查询？ HTML5 Canvas ？

我尝试将 HTML5 Canvas 与来自 this site 的 context.drawimage() 一起使用，它在屏幕上完美显示，但是当我调用 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");

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