是否存在无需绘制即可判断跨域图片是否会污染canvas的方法？

完全可以不需要把图片绘制到你的业务Canvas上就完成校验，常用的有两种轻量实现方式：

方法1：Image对象预加载校验（推荐，性能开销最小） #

原理是给图片请求显式声明CORS校验要求，只要能加载成功就代表资源符合跨域许可要求，不会造成Canvas污染：

• 创建临时Image实例，主动设置crossOrigin = 'anonymous'，告知浏览器需要请求带CORS授权的图片资源
• 分别绑定onload和onerror事件回调：
  • 触发onload：服务端返回了合法的CORS响应头，该图片可安全绘制到Canvas，不会造成污染
  • 触发onerror：跨域请求被CORS策略拦截，该图片不可用，绘制后会污染Canvas
    示例代码：

function checkImageSafe(url, callback) {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = () => callback(true);
  img.onerror = () => callback(false);
  img.src = url;
}

// 调用示例
checkImageSafe('用户输入的图片URL', (isSafe) => {
  if (isSafe) {
    // 后续正常使用该图片绘制到业务Canvas即可
  } else {
    alert('该图片跨域权限不足，无法使用');
  }
})

方法2：离屏Canvas二次校验 #

如果担心预加载逻辑有遗漏，可以用临时生成的离屏Canvas做最终校验，完全不会影响你的业务Canvas：

• 创建1x1大小的临时离屏Canvas，不需要插入到DOM中
• 把预加载好的图片绘制到这个临时Canvas上
• 调用getImageData()或者toDataURL()方法，如果没有抛出SecurityError异常，说明图片安全，反之则会污染Canvas
  示例代码：

function checkImageByOffscreenCanvas(img) {
  try {
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 1;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    ctx.getImageData(0, 0, 1, 1);
    return true;
  } catch (e) {
    return false;
  }
}

注意事项 #

• 必须给预加载的Image显式设置crossOrigin属性，缺省状态下浏览器不会发起带CORS头的图片请求，哪怕图片能正常加载，绘制后依然会污染Canvas
• 上述两种校验逻辑对同源图片同样生效，不会出现误判

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