在没有画布的情况下获取 Image uint8 数据

Question

我有一个用例，我想将图像 uint8 数据传递给网络工作者。 现在我正在使用画布来获取 uint8 图像数据。有没有办法在没有画布的情况下做到这一点。

这是我正在使用的一段代码。

let img = new Image(),
        canvas = document.createElement('canvas'),
        context = canvas.getContext('2d');

img.crossOrigin = 'anonymous';
img.src = someImageUrl;

img.onload = () => {
            canvas.height = this.naturalHeight;
            canvas.width = this.naturalWidth;
            context.drawImage(img, 0, 0);
            const imgData = context.getImageData(0, 0, canvas.width, canvas.height);

            // post this imgData to the worker
            worker.postMessage(imageData);
        };

Answer 1

在不久的将来，您应该能够从 ImageBitmap 转移到您的 Worker，在那里您将在 OffscreenCanvas 中处理它，它本身并不是一个真正的 HTMLCanvas，但提供一种访问相同上下文方法的方法，即使在 Worker 内部也是如此。

截至今天，只有 Chrome 和 Firefox 开始开发此 API，并且它们仍然隐藏在两者中（Chrome 的“Experimental Web Platforms”和 Firefox 的“gfx.offscreencanvas.enabled”）。
即便如此，只有 Chrome 在那里实现了 2DContext，对于 Firefox，你必须回退到 webgl 上下文，我不太了解，所以我将使用 readPixels em> 给别人。

所以是的，没有 HTMLCanvasElement 也可以做到这一点，但现在......我想你最好保持画布的方式。

if (!window.ImageBitmap || !window.OffscreenCanvas) {
  console.log('Your browser doesn\'t support ImageBitmap or OffscreenCanvas, we should fallback to a normal canvas');
} else {
  var img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = e => createImageBitmap(img).then(passToWorker);
  img.src = "https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg";


  function passToWorker(bitmap) {
    var blob = new Blob([work.textContent], {
      type: 'application/javascript'
    });
    var worker = new Worker(URL.createObjectURL(blob));
    worker.postMessage(bitmap, [bitmap]);
    worker.onmessage = e => {
      if (e.data instanceof ImageData) {
        console.log('ImageData', e.data.data.length, e.data.data[0]);
      } else {
        console.log(e.data);
      }
    };
  }
}

<script id="work" type="worker-script">
onmessage = function(evt) {
  const bitmap = evt.data;
  try {
    const ctx = new OffscreenCanvas(bitmap.width, bitmap.height).getContext('2d');
    if(!ctx) fallbackToWebGL(bitmap);
    ctx.drawImage(bitmap, 0, 0);
    handleImageData(ctx.getImageData(0, 0, bitmap.width, bitmap.height));
  } catch (e) {
    console.log(e, e.name);
    // FF doesn't even return null...
    if (e.name === 'NS_ERROR_NOT_IMPLEMENTED') {
    	fallbackToWebGL(bitmap);
    }
    else postMessage('come back later');
  }
};

function handleImageData(data) {
  postMessage(data);
}

function fallbackToWebGL(bitmap) {
  postMessage('should fallback to webgl readPixels...');
}
</script>

---

哦，另一种选择是为自己编写一个解析器，无论您的原始图像是什么格式，然后自己提取 RGBA 通道，但老实说，使用 Canvas 并没有那么糟糕。