Is there any way to use a Canvas Element inside of a Web Worker? I want to do canvas.toBlob inside of a Web Worker to reduce the quality of an image.

• I know only ImageData can be passed to the Web Worker, that doesn't help me, I need the canvas, not the canvasContext to do canvas.toBlob
  
• I know about the experimental offscreen Canvas in Firefox, I want support in other browsers aswell though.

Like maybe somehow through webworkify? Which allows to require other libraries inside a web worker?

I either need to pass a canvas elment to a Web Worker, or create a canvas Element inside of the Web Worker, or find an alternative way to reduce the quality of an image.

Is there any way to use a Canvas Element inside of a Web Worker? I want to do canvas.toBlob inside of a Web Worker to reduce the quality of an image.

• I know only ImageData can be passed to the Web Worker, that doesn't help me, I need the canvas, not the canvasContext to do canvas.toBlob
  
• I know about the experimental offscreen Canvas in Firefox, I want support in other browsers aswell though.

Like maybe somehow through https://github./substack/webworkify webworkify? Which allows to require other libraries inside a web worker?

I either need to pass a canvas elment to a Web Worker, or create a canvas Element inside of the Web Worker, or find an alternative way to reduce the quality of an image.

• javascript
• canvas
• html5-canvas
• web-worker

• try OffscreenCanvas developer.mozilla/en-US/docs/Web/API/OffscreenCanvas – defghi1977 Commented Dec 9, 2016 at 1:09
• 1 thanks but please note the second point listed with a dot in front in my question – bergben Commented Dec 9, 2016 at 1:34
• Currently no cross browser way yet to get web worker maniplulate DOM – Vinay Commented Dec 9, 2016 at 2:04
• 1 You can also use canvas.toDataURL("image/jpeg",quality) Why do you want to do it on a worker, it would probably take longer to start up a new context for the worker, parse the javascript, pass on the pixel data, then a very slow javascript implementation of jpeg encoding, and so on. By the time the encoded data returns you could have done it a dozen times using the native calls. – Blindman67 Commented Dec 9, 2016 at 12:27
• 1 With canvas.toDataURL I would still need the canvas. I want to do it in a web worker because I am calling it recursively to create a function that reduces the quality image just enough to fit a certain file-size limit but not further than needed, for which I created an algorithm that usually finds the best possible quality in 2 to 5 steps... – bergben Commented Dec 9, 2016 at 14:17

1 Answer 1

Use OffscreenCanvas:

OffscreenCanvas objects are used to create rendering contexts, much like an HTMLCanvasElement, but with no connection to the DOM. This makes it possible to use canvas rendering contexts in workers.

An OffscreenCanvas object may hold a weak reference to a placeholder canvas element, which is typically in the DOM, whose embedded content is provided by the OffscreenCanvas object. The bitmap of the OffscreenCanvas object is pushed to the placeholder canvas element by calling the mit() method of the OffscreenCanvas object's rendering context. All rendering context types that can be created by an OffscreenCanvas object must implement a mit() method. The exact behavior of the mit method (e.g. whether it copies or transfers bitmaps) may vary, as defined by the rendering contexts' respective specifications. Only the 2D context for offscreen canvases is defined in this specification.

This is an experimental feature, so it is hidden behind a flag. It is supported by Firefox:

This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

And Chrome:

This feature is behind a flag. In chrome://flags click enable under Experimental canvas features

For the worker use cases, there is no dependency on the DOM:

Web workers are not DOM-dependent. They handle pure data, which makes them especially suitable for JavaScript code that takes a long time to execute.

Only Firefox supports the ImageData manipulation.

References

• HTML5 Canvas: The OffscreenCanvas Interface

• OffscreenCanvas - Web APIs | MDN

• Web Workers | Tizen Developers

• Functions and classes available to Web Workers - Web APIs | MDN