问题及现象
今天在使用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>