JS OffscreenCanvas.toDataURL

Question

HTMLCanvasElement有toDataURL()，但OffscreenCanvas没有。真叫人吃惊。

好的，那么我如何让这个toDataURL()与Worker-s一起工作呢？我有一个现成的画布(完全绘制)，可以将它发送到Worker。但从那以后我能做什么呢？

我唯一的解决方案是手动完成创建image/png的所有操作。所以我在2010年找到了此页。(我不确定这是否是我所需要的。)此外，它还提供了这段代码，从那里生成一个PNG并使其成为base64。

最后一个问题是：

1-是否有合理的方法从Worker，OR获得Worker

2-是否有专门为这项工作设计的图书馆或东西，或

3.使用HTMLCanvasElement和OffscreenCanvas的所有功能，如何修改以下代码以替换toDataURL()

下面是代码im链接到的两个函数。(对我来说，它们真的很复杂，我对getDump()几乎什么都不了解)

    // output a PNG string
    this.getDump = function() {

        // compute adler32 of output pixels + row filter bytes
        var BASE = 65521; /* largest prime smaller than 65536 */
        var NMAX = 5552;  /* NMAX is the largest n such that 255n(n+1)/2 + (n+1)(BASE-1) <= 2^32-1 */
        var s1 = 1;
        var s2 = 0;
        var n = NMAX;

        for (var y = 0; y < this.height; y++) {
            for (var x = -1; x < this.width; x++) {
                s1+= this.buffer[this.index(x, y)].charCodeAt(0);
                s2+= s1;
                if ((n-= 1) == 0) {
                    s1%= BASE;
                    s2%= BASE;
                    n = NMAX;
                }
            }
        }
        s1%= BASE;
        s2%= BASE;
        write(this.buffer, this.idat_offs + this.idat_size - 8, byte4((s2 << 16) | s1));

        // compute crc32 of the PNG chunks
        function crc32(png, offs, size) {
            var crc = -1;
            for (var i = 4; i < size-4; i += 1) {
                crc = _crc32[(crc ^ png[offs+i].charCodeAt(0)) & 0xff] ^ ((crc >> 8) & 0x00ffffff);
            }
            write(png, offs+size-4, byte4(crc ^ -1));
        }

        crc32(this.buffer, this.ihdr_offs, this.ihdr_size);
        crc32(this.buffer, this.plte_offs, this.plte_size);
        crc32(this.buffer, this.trns_offs, this.trns_size);
        crc32(this.buffer, this.idat_offs, this.idat_size);
        crc32(this.buffer, this.iend_offs, this.iend_size);

        // convert PNG to string
        return "\211PNG\r\n\032\n"+this.buffer.join('');
    }

在这里，很清楚发生了什么：

    // output a PNG string, Base64 encoded
    this.getBase64 = function() {

        var s = this.getDump();

        // If the current browser supports the Base64 encoding
        // function, then offload the that to the browser as it
        // will be done in native code.
        if ((typeof window.btoa !== 'undefined') && (window.btoa !== null)) {
            return window.btoa(s);
        }

        var ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
        var c1, c2, c3, e1, e2, e3, e4;
        var l = s.length;
        var i = 0;
        var r = "";

        do {
            c1 = s.charCodeAt(i);
            e1 = c1 >> 2;
            c2 = s.charCodeAt(i+1);
            e2 = ((c1 & 3) << 4) | (c2 >> 4);
            c3 = s.charCodeAt(i+2);
            if (l < i+2) { e3 = 64; } else { e3 = ((c2 & 0xf) << 2) | (c3 >> 6); }
            if (l < i+3) { e4 = 64; } else { e4 = c3 & 0x3f; }
            r+= ch.charAt(e1) + ch.charAt(e2) + ch.charAt(e3) + ch.charAt(e4);
        } while ((i+= 3) < l);
        return r;
    }

谢谢

Answer 1

首先，我要指出的是，您可能不想要图像文件的数据URL，与它们的二进制等价的Blob相比，数据URL实际上是一种性能较差的文件处理方法，而且几乎可以使用data实际上也应该使用Blob和Blob来完成。

现在已经说过了，您仍然可以从OffscreenCanvas生成一个数据URL。

这是一个分两步的过程：

• 调用其convertToBlob方法
• 使用dataURL将生成的Blob读入FileReader[Sync]

​

const worker = new Worker(getWorkerURL());
worker.onmessage = e => console.log(e.data);

function getWorkerURL() {
  return URL.createObjectURL(
    new Blob([worker_script.textContent])
  );
}

<script id="worker_script" type="ws">
  const canvas = new OffscreenCanvas(150,150);
  const ctx = canvas.getContext('webgl');
  canvas[
    canvas.convertToBlob 
      ? 'convertToBlob' // specs
      : 'toBlob'        // current Firefox
   ]()
    .then(blob => {
      const dataURL = new FileReaderSync().readAsDataURL(blob);
      postMessage(dataURL);
    });
</script>

​

因为您想要的实际上是呈现这个OffscreenCanvas所产生的结果，所以最好通过传递可见控件的控件生成您的OffscreenCanvas。

这样，您就可以直接将ImageBitmap发送到UI，而无需任何内存开销。

​

const offcanvas = document.getElementById('canvas')
  .transferControlToOffscreen();
const worker = new Worker(getWorkerURL());
worker.postMessage({canvas: offcanvas}, [offcanvas]);

function getWorkerURL() {
  return URL.createObjectURL(
    new Blob([worker_script.textContent])
  );
}

<canvas id="canvas"></canvas>
<script id="worker_script" type="ws">
  onmessage = e => {
    const canvas = e.data.canvas;
    const gl = canvas.getContext('webgl');
    gl.viewport(0, 0,
        gl.drawingBufferWidth, gl.drawingBufferHeight);
    gl.enable(gl.SCISSOR_TEST);
    // make some slow noise (we're in a Worker)
    for(let y=0; y<gl.drawingBufferHeight; y++) {
      for(let x=0; x<gl.drawingBufferWidth; x++) {
        gl.scissor(x, y, 1, 1);
        gl.clearColor(Math.random(), Math.random(), Math.random(), 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
      }
    }
    // draw to visible <canvas> in FF
    if(gl.commit) gl.commit();
  };
</script>

​

如果您确实需要一个，那么来自生成的Blob的创建一个BlobURI。但是请注意，这样做，您确实将图像保存在内存中一次(这仍然比由数据URL诱导的三次图像要好得多，但仍然不要使用动画内容)。

​

const worker = new Worker(getWorkerURL());
worker.onmessage = e => {
  document.getElementById('img').src = e.data;
}

function getWorkerURL() {
  return URL.createObjectURL(
    new Blob([worker_script.textContent])
  );
}

img.onerror = e => {
  document.body.textContent = '';
  const a = document.createElement('a');
  a.href = "https://jsfiddle.net/5yhg2c9L/";
  a.textContent = "Your browser doesn't like StackSnippet's null origined iframe, please try again from this jsfiddle";
  document.body.append(a);
};

<img id="img">
<script id="worker_script" type="ws">
  const canvas = new OffscreenCanvas(150,150);
  const gl = canvas.getContext('webgl');
  gl.viewport(0, 0,
      gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.enable(gl.SCISSOR_TEST);
  // make some slow noise (we're in a Worker)
  for(let y=0; y<gl.drawingBufferHeight; y++) {
    for(let x=0; x<gl.drawingBufferWidth; x++) {
      gl.scissor(x, y, 1, 1);
      gl.clearColor(Math.random(), Math.random(), Math.random(), 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    }
  }
canvas[
  canvas.convertToBlob 
    ? 'convertToBlob' // specs
    : 'toBlob'        // current Firefox
 ]()
  .then(blob => {
    const blobURL = URL.createObjectURL(blob);
    postMessage(blobURL);
  });
</script>

​

(请注意，您也可以将一个ImageBitmap从工作线程传输到主线程，然后在可见的画布上绘制它，但是在这种情况下，使用转移上下文更好。)

Answer 2

Blob很棒，但实际上toBlob && convertToBlob要比Chrome上的toDataUrl慢得多，我真的不明白为什么.

在镀铬上，一张1920*1080的帆布，toDataUrl给我20毫秒，toBlob托克300-500毫秒，convertToBlob托克800毫秒。

因此，如果性能有问题，我宁愿在主线程中使用toDataUrl。