JavaScript-canvas-加载图像数据方法范例

1. 基础加载方法

（1）从 元素加载

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建Image对象
const img = new Image();
img.crossOrigin = 'Anonymous'; // 解决跨域问题（如需）
img.onload = function() {
  // 绘制图像到Canvas
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  
  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  console.log(imageData.data); // Uint8ClampedArray (RGBA数据)
};
img.src = 'image.jpg'; // 设置图片路径

（2）从Blob/File对象加载（文件上传）

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // 处理像素数据...
  };
  img.src = URL.createObjectURL(file); // 创建临时URL
});

2. 直接操作像素数据

（1）读取/修改像素

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data; // RGBA一维数组

// 遍历像素（示例：反色处理）
for (let i = 0; i < pixels.length; i += 4) {
  pixels[i] = 255 - pixels[i];     // R
  pixels[i+1] = 255 - pixels[i+1]; // G
  pixels[i+2] = 255 - pixels[i+2]; // B
  // A通道保持不变
}

// 回写数据
ctx.putImageData(imageData, 0, 0);

（2）性能优化技巧

• 分块处理：对大图像分区域处理

  const blockSize = 256;
  for (let y = 0; y < canvas.height; y += blockSize) {
    for (let x = 0; x < canvas.width; x += blockSize) {
      const w = Math.min(blockSize, canvas.width - x);
      const h = Math.min(blockSize, canvas.height - y);
      const imageData = ctx.getImageData(x, y, w, h);
      // 处理当前区块...
      ctx.putImageData(imageData, x, y);
    }
  }
  

3. 高级应用

（1）从视频帧捕获

const video = document.getElementById('video');
video.addEventListener('play', () => {
  function processFrame() {
    if (video.paused || video.ended) return;
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // 实时处理...
    requestAnimationFrame(processFrame);
  }
  processFrame();
});

（2）Web Worker 后台处理

// 主线程
const worker = new Worker('image-worker.js');
worker.postMessage({
  imageData: ctx.getImageData(0, 0, canvas.width, canvas.height)
});

// image-worker.js
self.onmessage = function(e) {
  const pixels = e.data.imageData.data;
  // 处理数据...
  self.postMessage({ result: pixels }, [pixels.buffer]);
};

4. 注意事项

1. 跨域限制：

   • 需设置 img.crossOrigin = 'Anonymous'
   • 服务器需返回正确的CORS头（如Access-Control-Allow-Origin: *）

2. 内存管理：

   // 释放临时URL
   URL.revokeObjectURL(img.src);
   

3. 性能瓶颈：

   • 大尺寸图像处理可能卡顿，建议：
     • 使用 OffscreenCanvas（需浏览器支持）
     • 降低分辨率处理

完整示例：图像灰度化

<canvas id="canvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  const img = new Image();
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // 灰度化处理
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i+1] + data[i+2]) / 3;
      data[i] = data[i+1] = data[i+2] = avg;
    }
    
    ctx.putImageData(imageData, 0, 0);
  };
  img.src = 'image.jpg';
</script>

通过以上方法，可以灵活地加载和处理Canvas中的图像数据。对于更复杂的操作（如卷积滤波、边缘检测等），建议结合WebAssembly或WebGL进一步优化性能。