无需额外网络请求，用JS获取<img>标签的图片数据字符串/缓冲区

如何直接访问已加载的图片数据，避免CORS限制与重复请求？ #

你遇到的问题是浏览器跨域安全机制导致的：如果<img>加载的是跨域图片且未配置CORS规则，浏览器会限制canvas读取其像素数据，甚至触发二次请求验证权限，最终导致失败。要直接复用已加载的图片数据，核心是让图片请求符合CORS要求，让浏览器允许canvas直接使用缓存的图片资源，无需发起二次请求。

解决方法 #

1. 提前配置图片的CORS属性

不管是动态创建的图片还是页面中已有的图片，都要在图片开始加载前设置crossOrigin属性，确保第一次请求就携带CORS头，让服务器返回允许跨域使用的资源：

动态创建图片的示例：

const img = new Image();
// 根据服务器配置选择'anonymous'（无需认证）或'use-credentials'（需要携带Cookie等）
img.crossOrigin = 'anonymous'; 
img.src = '你的图片URL';

img.onload = function() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  
  // 直接使用已加载的图片绘制
  ctx.drawImage(img, 0, 0);
  
  // 此时读取像素数据不会触发二次请求，也不会有CORS错误
  const imageData = ctx.getImageData(0, 0, img.width, img.height);
  console.log("图片数据：", imageData);
};

页面中已有图片的示例：

先在HTML中提前设置CORS属性：

<img id="targetImg" crossOrigin="anonymous" src="跨域图片URL">

然后在JS中处理已加载的图片：

const img = document.getElementById('targetImg');

// 先判断图片是否已加载完成
if (img.complete) {
  processLoadedImage(img);
} else {
  img.onload = () => processLoadedImage(img);
}

function processLoadedImage(img) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, img.width, img.height);
  console.log("图片数据：", imageData);
}

原理说明 #

• 当<img>设置了正确的crossOrigin属性后，浏览器会在请求图片时携带CORS相关头信息，服务器返回的资源会被标记为「允许跨域读取像素数据」。
• 此时canvas调用drawImage后，直接复用已加载到内存中的图片数据，不会发起二次请求；后续调用getImageData也不会触发浏览器的跨域拦截。
• 如果是同域图片，默认就符合CORS规则，不需要额外设置crossOrigin，也不会有二次请求的问题。

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