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

Question

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

1. 从图库中选择一张图片
2. 在上面应用蒙版
3. 将其保存为具有透明背景的 png 图像

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

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

Answer 1

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

想了解详情可以阅读本主题Why does canvas.toDataURL() throw a security exception?

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

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

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