JS OffscreenCanvas.toDataURL

Posted

技术标签:

【中文标题】JS OffscreenCanvas.toDataURL【英文标题】： 【发布时间】：2019-10-22 23:04:00 【问题描述】：

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

好的，那么我怎样才能让这个toDataURL() 与Worker-s 一起工作？我有一个现成的画布（完全绘制），可以将它发送到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;

谢谢

【问题讨论】：

【参考方案1】：

首先，我会注意到您可能不想要图像文件的数据 URL，数据 URL 处理文件的性能确实不如二进制等效 Blob，而且几乎您可以使用data 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>

如果你真的需要一个 ，那么来自生成的 Blob 的create a 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 从 Worker 传输到主线程，然后将其绘制在可见的画布上，但在这种情况下，使用传输的上下文会更好。）

【讨论】：

太棒了。谢谢。我需要将Worker-result 分配给一个简单的&lt;img&gt; 的源。你能提示我如何在没有Data URL 的情况下做得更好吗？谢谢 @ituy 抱歉，我现在没有时间，我确实用两种方法编辑了我的答案。 谢谢。唯一需要注意的是，在toDataURL 之上，toBlob + createObjectURL 在 WK 中占用了 4 倍的内存，在 FF 中占用了 2 倍。那是它闲置的时候。【参考方案2】：

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

在 chrome 上，一个 1920*1080 的画布，toDataUrl 需要 20 毫秒，toBlob 需要 300-500 毫秒，convertToBlob 需要 800 毫秒。

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

【讨论】：

如果我没记错的话，convertToBlob 是一个非常低优先级的异步进程，至少在 Chrome 中是这样。如果浏览器忙于 anything 其他（例如运行不是 100% gpu 加速的动画），它最终会花时间创建 blob。因此，如果您想要一致的速度，请使用 toDataURL （它会阻塞主线程，这就是为什么它总是“高”优先级）。缺点：它阻塞了主线程并且使用生成的数据 url 比使用 blob 慢:( 啊，我在考虑 HTMLCanvasElement.toBlob()，而不是 OffscreenCanvas.convertToBlob() - 是的，它们的命名不同，这很奇怪，直到你意识到前者使用回调，第二个是承诺。无论如何，toBlob() 在 Chrome 的主线程上以空闲时间运行，因此主线程中的其他内容将使其无法完成：groups.google.com/a/chromium.org/g/scheduler-dev/c/CFuzg2g-obI/…

以上是关于JS OffscreenCanvas.toDataURL的主要内容，如果未能解决你的问题，请参考以下文章

如何在一个js中调用另一个js,以及载入多个有依赖关系的js

js文件如何引用外部js

在js中获取作成者

怎么调用外部js文件?

web--JS 基础实例汇总

怎么合并js