本地图片调用getImageData()报错：画布被跨源数据污染

你遇到的DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data错误，核心原因是直接用本地file://协议打开HTML文件时，浏览器的同源策略会限制读取本地图片的像素数据，导致canvas被标记为"污染"状态，无法调用getImageData。

解决办法 #

1. 用本地HTTP服务器运行项目

不要直接双击HTML文件打开，而是用本地服务器以http协议访问：

• 如果你有Python，打开终端进入项目目录，运行：

  # Python3
  python -m http.server 8000
  # Python2
  python -m SimpleHTTPServer 8000
  

  然后在浏览器访问http://localhost:8000
• 或者用VSCode的「Live Server」插件，右键HTML文件选择「Open with Live Server」

2. 给图片设置跨域属性（配合本地服务器使用）

在创建Image对象后、设置src之前，添加crossOrigin属性，确保浏览器允许读取图片数据：

let imgObj = new Image();
imgObj.crossOrigin = 'anonymous'; // 必须在src之前设置

修正后的完整代码 #

同时修复你代码里的几处小错误（变量名不一致、drawImage参数逻辑错误）：

document.addEventListener("DOMContentLoaded",(e)=>{
  const canvas = document.querySelector('#canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 600;
  canvas.height = 400;

  let imgObj = new Image();
  imgObj.crossOrigin = 'anonymous'; // 添加跨域属性

  imgObj.onload = function(e){
    let nw = imgObj.naturalWidth; // 取图片自身的宽高，而非canvas的
    let nh = imgObj.naturalHeight;
    let aspect = nw / nh;
    let drawWidth = canvas.width;
    let drawHeight = drawWidth / aspect;
    // 确保图片在canvas范围内显示，避免超出高度
    if(drawHeight > canvas.height){
      drawHeight = canvas.height;
      drawWidth = drawHeight * aspect;
    }
    ctx.drawImage(imgObj, 0, 0, drawWidth, drawHeight);
  }

  imgObj.src = 'img/Tooth1.png';

  const grayScale = function(ev){
    try {
      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const arr = imgData.data;

      for(let i = 0; i < arr.length; i += 4){
        const ttl = arr[i] + arr[i+1] + arr[i+2];
        const avg = parseInt(ttl / 3);
        arr[i] = avg;
        arr[i+1] = avg;
        arr[i+2] = avg;
      }

      ctx.putImageData(imgData, 0, 0);
    } catch (error) {
      console.log(error);
    }
  }

  canvas.addEventListener('click', grayScale);
});

内容的提问来源于stack exchange，提问作者Josh Allred