JavaScript 清除图片背景颜色 使之透明

2023-02-07 15:48:20

问题及现象

今天在使用js对图片的背景进行处理掉,使其图片透明时候遇到使用canvas 的 getImageDate 函数在处理跨域图片的时候会报错。

chrome:Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
ff:SecurityError: The operation is insecure.

浏览器都会因为安全问题拒绝访问非同源的资源。

canvas 不支持跨域是解决方案:

将image对象设置成允许跨域,img.crossOrigin = ‘’;

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
 
var img = new Image();
img.crossOrigin = '';
img.onload = function () {
    context.drawImage(this, 0, 0);
    context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png';
复制代码

完整示例

JavaScript 清除图片背景颜色 使之透明

<!DOCTYPE html>
<html>
 
<head>
	<title>JavaScript 清除图片背景颜色 使之透明</title>
	<meta name="generator" content="editplus" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style>
		html,
		body {
			background: #c7bbbb;
			text-align: center;
		}
	</style>
</head>
 
<body>
	<img id="img"
		src='https://img-blog.csdnimg.cn/2022020110394629157.png'>
 
	<script>
		setTimeout(() => {
			removeImgBg(document.getElementById('img'));
		}, 3000);

		/**清除图片背景颜色 
        不会出现canvas 跨域问题
        **/
		function removeImgBg(img) {
            //背景颜色  白色
            const rgba = [255, 255, 255, 255];
            // 容差大小
            const tolerance = 60;
        
            var imgData = null;
            const [r0, g0, b0, a0] = rgba;
            var r, g, b, a;
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            const w = img.width;
            const h = img.height;
            canvas.width = w;
            canvas.height = h;
            
            var img2 = new Image();
            img2.crossOrigin = '';
            img2.onload = function () {
                context.drawImage(this, 0, 0);
                imgData = context.getImageData(0, 0, w, h);
                for (let i = 0; i < imgData.data.length; i += 4) {
                    r = imgData.data[i];
                    g = imgData.data[i + 1];
                    b = imgData.data[i + 2];
                    a = imgData.data[i + 3];
                    const t = Math.sqrt((r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2);
                    if (t <= tolerance) {
                        imgData.data[i] = 0;
                        imgData.data[i + 1] = 0;
                        imgData.data[i + 2] = 0;
                        imgData.data[i + 3] = 0;
                    }
                }
                context.putImageData(imgData, 0, 0);
                const newBase64 = canvas.toDataURL('image/png');
                img.src = newBase64;
            };
            img2.src = img.src;
        }
 
 
        /**清除图片背景颜色 
        会出现canvas 跨域问题
        **/
        function removeImgBg2(img) {
            //背景颜色  白色
            const rgba = [255, 255, 255, 255];
            // 容差大小
            const tolerance = 60;
        
            var imgData = null;
            const [r0, g0, b0, a0] = rgba;
            var r, g, b, a;
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            const w = img.width;
            const h = img.height;
        
        
            canvas.width = w;
            canvas.height = h;
            context.drawImage(img, 0, 0);
            imgData = context.getImageData(0, 0, w, h);
        
            for (let i = 0; i < imgData.data.length; i += 4) {
                r = imgData.data[i];
                g = imgData.data[i + 1];
                b = imgData.data[i + 2];
                a = imgData.data[i + 3];
                const t = Math.sqrt((r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2);
                if (t <= tolerance) {
                    imgData.data[i] = 0;
                    imgData.data[i + 1] = 0;
                    imgData.data[i + 2] = 0;
                    imgData.data[i + 3] = 0;
                }
            }
            context.putImageData(imgData, 0, 0);
            const newBase64 = canvas.toDataURL('image/png');
            img.src = newBase64;
        }
	</script>
</body>
 
</html>
  • 作者:liuccn
  • 原文链接:https://blog.csdn.net/lc_2014c/article/details/125283959
    更新时间:2023-02-07 15:48:20