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

比眉伴天荒 2023-02-10 08:00 102阅读 0赞

主要JS

/**清除图片背景颜色 **/
    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;
        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;
    }

测试示例：

<!DOCTYPE html>
    <html>
    
    <head>
    	<title> new document </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='data:image/png;base64,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'>
    
    	<script>
    		setTimeout(() => {
    			removeImgBg(document.getElementById('img'));
    		}, 3000);
    
    
            /**清除图片背景颜色 **/
            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;
                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>

清除前：

![20200520202614408.png][]

清除后：

![20200520202637852.png][]

[20200520202614408.png]: https://img-blog.csdnimg.cn/20200520202614408.png
[20200520202637852.png]: https://img-blog.csdnimg.cn/20200520202637852.png