在图像上应用遮罩，然后将其保存为透明背景 [英] apply a mask on an image then save it with transparent background

问题描述

我正在开发一个WebApp，该WebApp需要一个允许用户进行操作的功能

I am working on an WebApp which requires a function to allow user to

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

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

Is there any way to do it? Jquery? HTML5 canvas?

我试图从此网站中将HTML5画布与context.drawimage()一起使用，它完美地显示在屏幕上，但是当我调用canvas.toDataURL()时，它出现了一个空白图像.有人可以帮忙吗?欢迎任何建议.预先感谢.

I tried to use HTML5 canvas with context.drawimage() from this site, it displays perfectly on the screen but when I called canvas.toDataURL(), it came up with a blank image. Could anyone help? Welcome any suggestions. Thanks in advance.

推荐答案

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

You cannot get data from an image which is not in your domain for security reasons. This is probably why you get a blank image, you should check your browser console.

如果您想了解详细信息，可以阅读本主题.为什么选择画布.toDataURL()抛出安全异常?

You can read this topic if you want details Why does canvas.toDataURL() throw a security exception?

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

Anyway, yes canvas stores pixels into a rgba array so you can have transparent background. Use it this way :

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

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

If you want advanced help then don't forget to post your code. I hope my advice will be enough, good luck !

这篇关于在图像上应用遮罩，然后将其保存为透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！