javascript - 受污染的 "OffscreenCanvas"可能无法导出

Question

我将 ImageBitmap 传递给 webworker，以在 Canvas 上呈现，然后生成一个 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])

在 worker

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

DOMException: Failed to execute 'convertToBlob' on 'OffscreenCanvas': Tainted "OffscreenCanvas" may not be exported.

主线程上的图片有 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>

但是有一点我还是很不喜欢你 应该在它到达工作线程之前就已经收到错误说明

Failed to execute 'postMessage' on 'Worker': Non-origin-clean ImageBitmap cannot be transferred.

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