受污染的“OffscreenCanvas”可能无法导出

Question

我将 ImageBitmap 传递给 webworker，在画布上呈现，然后生成一个 URL 以加载到主线程上的 THREE.js。

在主线程中

 this.canvas = this.canvasEl.transferControlToOffscreen() 
this.workerInstance.postMessage({canvas: this.canvas}, [this.canvas]);
...

createImageBitmap(this.img).then(imageData =>  {
        this.imageBitmap = imageData
        this.workerInstance.postMessage({image:imageData}, [imageData])

在工人中

_ctx.drawImage(image, 0, 0)
    _canvas.convertToBlob({type: "image/png"}).then(blob => console.log(blob))

DOMException：无法在“OffscreenCanvas”上执行“convertToBlob”： 可能无法导出受污染的“OffscreenCanvas”。

主线程上的图像有crossorigin="anonymous"。它也确实复制了另一个图像，但这是同一个域。

图像是动态创建的：

docString = '<svg width="' + this.width + '" height="' + this.height + '" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"><![CDATA[a[href]{color:#0000EE;text-decoration:underline;}' + this.cssembed.join('') + ']]></style></defs><foreignObject x="0" y="0" width="' + this.width + '" height="' + this.height + '">' + parent[0] + docString + parent[1] + '</foreignObject></svg>';
this.img.src = "data:image/svg+xml;utf8," + encodeURIComponent(docString);

代码在这里https://github.com/supereggbert/aframe-htmlembed-component/blob/master/src/htmlcanvas.js

我正在更新它以使用 Offscreen canvas 和 web workers 来加快渲染速度

Answer 1

这是this known bug 的扩展，我已经给出了explanation here。

对于您的情况，似乎即使使用“data:URL hack-around”也不起作用，可能是因为在createImageBitmap 内部步骤中执行了一些其他检查。

我将在错误报告中添加对此的评论，但目前，您必须先在 上光栅化该 svg 图像并将该 用作源对于 ImageBitmap，我想这对于您的情况来说并不理想。

if( !window.OffscreenCanvasRenderingContext2D ) {
  console.warn("Your browser doesn't support the 2D context of the OffscreenCanvas API");
}

const worker = initWorker();

const data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
  '<em>I</em> like ' +
  '<span style="color:white; text-shadow:0 0 2px blue;">' +
  'beer</span>' +
  '</div>' +
  '</foreignObject>' +
'</svg>';
const img = new Image();
var url = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(data);

img.onload = function() {
  // create a new canvas just to rasterize that svg
  const canvas = document.createElement( 'canvas' );
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  // use that canvas as the source for the ImageBitmap
  createImageBitmap(canvas).then(bmp => {
    worker.postMessage( bmp, [bmp] );
  });
};

img.src = url;

function initWorker() {
  const script = `
    let canvas, ctx;
    onmessage = e => {
      if(e.data instanceof ImageBitmap) {
        ctx.drawImage( e.data, 0, 0);
        canvas.convertToBlob().then( blob => {
          self.postMessage( blob );
        });
      }
      else {
        canvas = e.data;
        ctx = canvas.getContext('2d');
      }
    };
`
  const url = URL.createObjectURL(new Blob([script], { type: "application/javascript" }));
  const worker = new Worker(url);
  worker.onmessage = e => console.log('from worker', e.data);
  const offscreen = document.getElementById('canvas').transferControlToOffscreen();
  worker.postMessage(offscreen, [offscreen]);
  return worker;
}

<canvas id="canvas"></canvas>

但是有一点我还是很不喜欢，因为你应该在它到达工作线程声明之前就已经得到了一个错误

在 'Worker' 上执行 'postMessage' 失败：无法传输非来源干净的 ImageBitmap。

我不知道你的 Chrome 是怎么绕过这一步的......