JS OffscreenCanvas.toDataURL

Question

HTMLCanvasElement имеет toDataURL(), но OffscreenCanvas не имеет. Какой сюрприз.

Хорошо, так как я могу заставить этот toDataURL() работать с Worker -s? У меня есть готовый холст (полностью нарисованный), и я могу отправить его на Worker. Но тогда что я могу сделать оттуда?

Единственное решение, которое у меня есть, - это вручную выполнить все операции для создания image/png. Так что я нашел эту страницу с 2010 года (хотя я не уверен, что это то, что мне нужно.) И далее он предоставляет этот код , откуда он генерирует PNG и делает его к base64.

И мой последний вопрос:

1 - Есть ли какой-нибудь разумный способ получить toDataURL() от Worker, ИЛИ

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-объекта и URI-объекта Blob.

Теперь уже сказано, что вы все равно можете генерировать URL-адрес данных из OffscreenCanvas.

Это двухэтапный процесс:

• вызовите его convertToBlob метод
• чтение созданного BLOB-объекта как dataURL с использованием 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 напрямую в интерфейс без каких-либо дополнительных затрат памяти.

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>

Если вам действительно нужен , тогда создайте 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 в основной поток и затем нарисовать его на видимом холсте, но в этом случае использование переданного контекста еще лучше.)