javascript - JS OffscreenCanvas.toDataURL

Question

HTMLCanvasElement 有toDataURL()，但是OffscreenCanvas 没有。真是个惊喜。

好的，那么我怎样才能使这个 toDataURL() 与 Worker-s 一起工作？我有一个现成的 Canvas (完全绘制)，可以将它发送给 Worker。但是我能从那里做什么呢？

我唯一的解决方案是手动执行所有操作以创建 image/png。所以我从 2010 年找到了 this page。(虽然我不确定这是否是我所需要的。)而且它还提供了 this code ，它从那里生成 PNG 并将其转换为 base64。

我的最后一个问题:

1 - 是否有一些合理的方法从 Worker 获取 toDataURL()，或者

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

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

这是我链接到的代码中的两个函数。 (它们对我来说真的很复杂，我对 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，数据 URL 确实是一种处理文件的方式，而不是它们的二进制等价物 Blob，而且几乎您可以用数据 URL 来做，实际上可以而且通常应该用 Blob 和 Blob URI 来代替。

话虽如此，您仍然可以很好地从 OffscreenCanvas 生成数据 URL。

这是一个两步过程:

• 调用它的 convertToBlob方法
• 使用 FileReader[Sync] 将生成的 Blob 读取为 dataURL

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 确实产生的东西，你最好通过 transferring the control of a visible one 生成你的 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>

如果你真的绝对需要一个，那么create a BlobURI来自生成的 Blob。但请注意，这样做确实会将图像保存在内存中一次(这仍然比数据 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 从 Worker 传输到主线程，然后将其绘制在可见的 Canvas 上，但在这种情况下，使用传输的上下文会更好。)