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

Question

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

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

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

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

Answer 1

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

想了解详情可以阅读本主题为什么 canvas.toDataURL() 会抛出安全异常？

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

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

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