如何判断图片为透明图片 getImageData rgba

最新推荐文章于 2022-09-25 10:35:03 发布

转载最新推荐文章于 2022-09-25 10:35:03 发布 · 4.9k 阅读

前端专栏收录该内容

29 篇文章

订阅专栏

本文探讨了如何使用HTML5 Canvas处理跨域图片，包括检测图片透明度、保存图片到DOM存储，以及解决由CORS引起的canvas污染问题。介绍了如何设置服务器响应头以允许跨域请求，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

            let _img = new Image(),
                    _canvas = window.document.createElement("canvas"),
                    _context = _canvas.getContext("2d");
            _img.onload = function () {
                let originWidth = _img.width,
                    originHeight = _img.height;
                _canvas.width = originWidth;
                _canvas.height = originHeight;
                _context.clearRect(0, 0, originWidth, originHeight);
                _context.drawImage(_img, 0, 0);
                let imageData = _context.getImageData(0, 0, originWidth, originHeight).data;
                // 检测是否是透明图片 Uint8ClampedArray 描述了一个一维数组，包含以 RGBA 顺序的数据，数据使用  0 至 255（包含）的整数表示。
                isTransparent = true;
                for (let index = 3; index < imageData.length; index += 4) {
                    if (imageData[index] !== 0) {
                        isTransparent = false;
                        break;
                    }
                }
               
            };
            _img.onerror = function () {
       
            };
            _img.url = _url;

注意：

HTML 规范文档为 images 引入了 crossorigin属性, 通过设置适当的头信息 CORS, 可以从其他站点加载 img图片, 并用在 canvas 中,就像从当前站点(current origin)直接下载的一样.

crossorigin属性的使用细节, 请参考 CORS settings attributes.

什么是 “被污染的(tainted)” canvas?

尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob(), toDataURL()和 getImageData()等方法, 否则会抛出安全错误(security error).

这实际上是为了保护用户的个人信息,避免未经许可就从远程web站点加载用户的图像信息,造成隐私泄漏。

(译者注: 如果用户登陆过QQ等社交网站, 假若不做保护,则可能打开某个网站后,该网站利用 canvas 将用户的图片信息获取,上传,进而引发泄露.)

示例: 从其他站点保存图片

首先, 图片服务器必须设置相应的 Access-Control-Allow-Origin响应头。添加 img 元素的 crossOrigin 属性来请求头。比如Apache服务器,可以拷贝 HTML5 Boilerplate Apache server configs中的配置信息, 来进行回应:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
    <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
        SetEnvIf Origin ":" IS_CORS
        Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
    </IfModule>
</IfModule>

这些设置生效之后, 就可以像本站的资源一样, 保存其他站点的图片到 DOM存储之中(或者其他地方)。

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // 具体的图片地址

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
//  确保缓存的图片也触发 load 事件
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

浏览器兼容性

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	13	8	No support	No support	?

Mobile

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

--------------------- 本文来自 铁锚 的优快云 博客 ，全文地址请点击：https://blog.youkuaiyun.com/renfufei/article/details/51675148?utm_source=copy

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData

https://www.zhangxinxu.com/wordpress/2018/05/canvas-png-transparent-background-detect/

https://www.zhangxinxu.com/wordpress/2017/12/canvas-getimagedata-letter-shape-animation/

https://blog.youkuaiyun.com/renfufei/article/details/51675148