When processing images, the browser uses the main thread to render the UI and handle user interactions. This means that if the image processing takes too long, the UI will become unresponsive. Web Workers are a way to run JavaScript code in the background, separate from the main thread. This means that the image processing will not block the main thread, and the UI will remain responsive.
The way this works in Derivv is the canvas is created in the main thread, and then the image is drawn on the canvas. The canvas is then sent to a web worker for processing. The web worker then sends the processed image back to the main thread.
See downscale.worker.js in GH repo where the intensive part of the operation takes place.
// downscale.js
import WebWorker from './WebWorker'
import downscaleWorker from './downscale.worker'
// scales the image by (float) scale < 1
// returns a canvas containing the scaled image.
function downscaleImage(img, scale) {
return new Promise((resolve, reject) => {
if (!(scale < 1) || !(scale > 0)) {
reject('scale must be a positive number < 1')
}
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const context = canvas.getContext('2d')
context.drawImage(img, 0, 0)
const imageData = context
.getImageData(0, 0, canvas.width, canvas.height)
.data;
const data = {
imageData,
sourceWidth: canvas.width,
sourceHeight: canvas.height,
scale: normalizeScale(scale)
}
const worker = new WebWorker(downscaleWorker)
worker.postMessage(data)
worker.addEventListener('message', event => {
resolve(createResultCanvas(event.data))
})
})
}
This worker is called for each image that is processed. It takes the image data, scales it, and then sends it back to the main thread. The main thread then draws the image on the canvas and displays it to the user for further editing or downloading.
Previous: Make it Tolerable using Web Workers
Next: What Makes the Interface So Unique?