如何不使用canvas通过XMLHttpRequest从图片URL获取ImageData对象？

要在完全不使用canvas的前提下将网络请求的图片转为ImageData，可以使用浏览器原生ImageDecoder接口实现，无需依赖任何canvas相关API。

完整实现代码 #

async function getImageDataFromUrl(url) {
  // 1. 用XHR请求图片二进制数据
  const xhr = new XMLHttpRequest();
  xhr.responseType = 'arraybuffer'; // 此处需设为arraybuffer，不要使用blob
  return new Promise((resolve, reject) => {
    xhr.onload = function() {
      if (xhr.status !== 200) {
        reject(new Error(`请求失败，状态码：${xhr.status}`));
        return;
      }
      // 2. 用ImageDecoder解码图片
      const decoder = new ImageDecoder({
        data: xhr.response,
        type: xhr.getResponseHeader('Content-Type') || 'image/x-icon' // 适配favicon的MIME类型
      });
      decoder.decode().then(result => {
        const bitmap = result.image;
        // 3. 从解码后的位图直接构造ImageData
        const imageData = new ImageData(
          new Uint8ClampedArray(bitmap.allocationSize()),
          bitmap.width,
          bitmap.height
        );
        bitmap.copyTo(imageData.data);
        resolve(imageData);
      }).catch(reject);
    };
    xhr.onerror = reject;
    xhr.open('GET', url, true);
    xhr.send();
  });
}

// 调用示例
getImageDataFromUrl('favicon.ico').then(imageData => {
  // 此处拿到的就是标准ImageData格式数据，可直接使用
  console.log('获取到的ImageData：', imageData);
}).catch(err => {
  console.error('处理失败：', err);
});

关键说明 #

• XHR的responseType必须设置为arraybuffer，才能直接传入ImageDecoder进行解码，不需要额外转格式
• 全程没有调用任何canvas相关API，符合禁用canvas的要求
• 如果需要兼容不支持ImageDecoder的老旧浏览器，目前没有完全脱离canvas的实现方案，因为ImageData的像素来源在原生API层面只有canvas和ImageDecoder两个合法路径
• 该方案的运行性能远高于基于canvas的实现，解码效率和内存占用都有明显优化

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