The export of a corrupted "OffscreenCanvas" is prohibited

Question

The export of a corrupted "OffscreenCanvas" is prohibited

Currently, I am implementing a process where an ImageBitmap is passed into a web worker in order to render it on a canvas. Subsequently, a URL is generated for loading into THREE.js on the main thread.

Within the main thread

 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])

Inside the worker

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

Encountered a DOMException: Failed to execute 'convertToBlob' on 'OffscreenCanvas': The "OffscreenCanvas" in use may not be exported.

The image on the main thread is marked with crossorigin="anonymous". Another image is also added to it, but both are from the same domain.

This image is dynamically created:

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);

You can view the code here.

I am currently in the process of updating the code to utilize Offscreen canvas and web workers for improved rendering performance.

javascript canvas three.js

Answer 1

Answer №1

This issue is connected to a previous bug that I addressed in detail here.

In this specific scenario, it seems that even employing the "data:URL hack-around" will not solve the problem, likely due to additional checks conducted within the internal steps of createImageBitmap.

I will make a note of this in the bug report. In the meantime, the workaround involves rasterizing the svg image on a <canvas> first and then utilizing that <canvas> as the ImageBitmap source. This method is less than ideal but should suffice for now.

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>

One aspect that still bothers me is that you should have encountered an error prior to reaching the worker thread, specifically:

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

I find it puzzling that your Chrome browser managed to bypass this crucial step...

Answer 2

This issue is connected to a previous bug that I addressed in detail here.

In this specific scenario, it seems that even employing the "data:URL hack-around" will not solve the problem, likely due to additional checks conducted within the internal steps of createImageBitmap.

I will make a note of this in the bug report. In the meantime, the workaround involves rasterizing the svg image on a <canvas> first and then utilizing that <canvas> as the ImageBitmap source. This method is less than ideal but should suffice for now.

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>

One aspect that still bothers me is that you should have encountered an error prior to reaching the worker thread, specifically:

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

I find it puzzling that your Chrome browser managed to bypass this crucial step...

The export of a corrupted "OffscreenCanvas" is prohibited

Answer №1

Similar questions

Discovering the current time and start time of today in EST can be achieved by utilizing Moment.js

Issue with jsPDF: PNG file is either incomplete or corrupted

adding content to div is becoming less speedy

"Encountered a TypeError: Cannot read property 'params

Access Flask variable in JavaScript code

Django DRF functions properly, however it returns an error when sending a response to an AJAX request

Here is a list of selections that can be easily removed and have a child selection added

Utilizing Firebase login to integrate with Facebook API

Acquire the <li> element when it is clicked using vanilla JavaScript

"Unlock the Power of VueJS 2 with Dynamic Templates

Unusual Glitch in Bootstrap 3 Dropdown Menu

Leveraging the power of ES6, achieve recursion with requestAnimationFrame in

The additional cost associated with using a React hook is called the "

Encountering an issue while trying to import the D3.js library into my React.js application

Run a PHP script that creates a PDF file using jQuery AJAX

Find the identifier that does not currently exist in the collection of objects

Formik: encountering target as undefined while passing Material UI Date Picker as prop to React Component

Set a dynamic Active Class on various divisions by utilizing their respective indexes

Is there an official IRC channel for YUI?

What is the best way to store chat messages in a React application?