Firefox扩展开发：不使用getImageData()获取Canvas像素的方法

哥们，我太懂这种被Firefox的CORS限制卡得头疼的感觉了——跨域图片渲染到Canvas后，浏览器会标记画布为“污染”状态，直接调用getImageData()肯定触发安全错误。既然你是开发浏览器扩展，咱们可以利用扩展的特权或者其他技术绕开这个限制，下面几个方案都是实测可行的：

方案1：直接下载图片二进制数据，手动解析像素 #

作为Firefox扩展，你完全拥有跨域请求的权限，不用依赖页面的CORS设置。直接把图片下载成Blob，转成ArrayBuffer后，根据图片格式（PNG/JPG/WebP）手动解析像素数据。

这种方案的好处是完全脱离Canvas，从根源上避开CORS限制，但需要你处理图片的二进制格式解析。如果嫌自己写解析逻辑麻烦，可以打包个轻量的图片解析库（比如pngjs或者jpeg-js）到扩展里。

示例代码（以PNG为例）：

// 在扩展的背景页或内容脚本中执行
async function getPixelDataFromImage(url) {
  // 扩展环境下fetch默认允许跨域，无需额外配置
  const response = await fetch(url);
  const blob = await response.blob();
  const arrayBuffer = await blob.arrayBuffer();

  // 这里用简化的PNG解析逻辑（实际项目建议用成熟库）
  const dataView = new DataView(arrayBuffer);
  const width = dataView.getUint32(16, false); // 从PNG的IHDR块读取宽度
  const height = dataView.getUint32(20, false); // 读取高度

  // 后续需要解析IDAT块的压缩数据，用pako库解压后就能得到RGBA像素数组
  // 比如引入pako后：const decompressedData = pako.inflate(rawIdatData);
  return { width, height, pixels: /* 解析后的Uint8Array像素数据 */ };
}

方案2：用WebGL读取像素（最省心的替代方案） #

WebGL对跨域资源的处理逻辑和Canvas不太一样，在扩展环境下，用createImageBitmap加载跨域图片后，渲染到WebGL上下文，再调用readPixels()读取像素，不会触发CORS错误。

这个方案不需要手动解析图片格式，WebGL会帮你完成解码，代码量也可控：

async function getPixelsViaWebGL(imageUrl) {
  // 用createImageBitmap加载跨域图片（扩展环境下允许）
  const imgBlob = await fetch(imageUrl).then(res => res.blob());
  const imgBitmap = await createImageBitmap(imgBlob);

  // 创建OffscreenCanvas和WebGL上下文
  const canvas = new OffscreenCanvas(imgBitmap.width, imgBitmap.height);
  const gl = canvas.getContext('webgl');

  // 初始化简单的WebGL着色器程序（用来渲染纹理到画布）
  const program = createBasicWebGLProgram(gl);
  gl.useProgram(program);

  // 创建纹理并绑定ImageBitmap
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgBitmap);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

  // 渲染全屏四边形，把纹理画到画布
  gl.drawArrays(gl.TRIANGLES, 0, 6);

  // 读取像素数据
  const pixelBuffer = new Uint8Array(imgBitmap.width * imgBitmap.height * 4);
  gl.readPixels(0, 0, imgBitmap.width, imgBitmap.height, gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer);

  return { width: imgBitmap.width, height: imgBitmap.height, pixels: pixelBuffer };
}

// 辅助函数：创建基础的WebGL着色器程序
function createBasicWebGLProgram(gl) {
  // 顶点着色器：处理顶点位置和纹理坐标
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, `
    attribute vec2 a_position;
    attribute vec2 a_texCoord;
    varying vec2 v_texCoord;
    void main() {
      gl_Position = vec4(a_position, 0.0, 1.0);
      v_texCoord = a_texCoord;
    }
  `);
  gl.compileShader(vertexShader);

  // 片段着色器：采样纹理颜色
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, `
    precision mediump float;
    varying vec2 v_texCoord;
    uniform sampler2D u_texture;
    void main() {
      gl_FragColor = texture2D(u_texture, v_texCoord);
    }
  `);
  gl.compileShader(fragmentShader);

  // 链接程序并设置顶点数据
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  // 设置全屏顶点坐标
  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1, -1, 1, -1, -1, 1,
    -1, 1, 1, -1, 1, 1
  ]), gl.STATIC_DRAW);
  const posLoc = gl.getAttribLocation(program, 'a_position');
  gl.enableVertexAttribArray(posLoc);
  gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);

  // 设置纹理坐标
  const texCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0, 0, 1, 0, 0, 1,
    0, 1, 1, 0, 1, 1
  ]), gl.STATIC_DRAW);
  const texLoc = gl.getAttribLocation(program, 'a_texCoord');
  gl.enableVertexAttribArray(texLoc);
  gl.vertexAttribPointer(texLoc, 2, gl.FLOAT, false, 0, 0);

  return program;
}

方案3：把跨域图片转成同源DataURL（间接用回getImageData） #

如果你的扩展是在页面的content script中运行，还可以把跨域图片转成同源的DataURL，这样再渲染到Canvas就不会被标记为污染，就能正常调用getImageData()了——相当于绕开CORS限制，间接回到你原本的流程。

示例代码：

// content script中执行
async function convertToDataUrl(imgElement) {
  const response = await fetch(imgElement.src);
  const blob = await response.blob();
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

// 使用方式
const targetImg = document.querySelector('img.your-target-image');
const dataUrl = await convertToDataUrl(targetImg);

// 创建新图片元素（或修改原有元素）加载DataURL
const safeImg = new Image();
safeImg.src = dataUrl;
await new Promise(resolve => safeImg.onload = resolve);

// 现在渲染到Canvas就不会触发CORS了
const canvas = document.createElement('canvas');
canvas.width = safeImg.width;
canvas.height = safeImg.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(safeImg, 0, 0);
const pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height);

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