The way I'm resizing images now is by sticking it into a canvas element and then scaling the context of the canvas. The problem is, when I'm resizing many images the UI basically freezes. Is there anyways I can move this resizing step to a web worker? Problem I'm having is that you can't use document.createElement('canvas') or Image(), two functions crucial to this implementation.

The way I'm resizing images now is by sticking it into a canvas element and then scaling the context of the canvas. The problem is, when I'm resizing many images the UI basically freezes. Is there anyways I can move this resizing step to a web worker? Problem I'm having is that you can't use document.createElement('canvas') or Image(), two functions crucial to this implementation.

• javascript
• image
• image-resizing
• web-worker

2 Answers 2

It is possible. However, because canvas isn't available in a worker, you would have to use your own/3rd party code to manipulate the image data in the worker.

For example, you could use https://github./nodeca/pica, which quite handily does its processing in a web worker if web workers are supported.

A rough example of using this to resize image from an img element to a canvas element...

<button onclick="resize()">Resize</button>
<img id="original" src="my-image.jpg">
<canvas id="resized">

With Javascript

function resize() {
  // Find the original image
  var originalImg = document.getElementById("original");

  // Create an empty canvas element of the same dimensions as the original
  var originalCanvas = document.createElement("canvas");
  originalCanvas.width = originalImg.width;
  originalCanvas.height = originalImg.height;

  // Copy the image contents to the canvas
  var ctx = originalCanvas.getContext("2d");
  ctx.drawImage(originalImg, 0, 0);

  // Set the target dimensions
  var resizedCanvas = document.getElementById("resized");
  resizedCanvas.width = originalCanvas.width / 2;
  resizedCanvas.height = originalCanvas.height / 2;

  // Resize (using web workers if supported)
  pica.resizeCanvas(originalCanvas, resizedCanvas, {}, function(err) {
    // Do something on finish/error
  }); 
}

Which can be seen at https://plnkr.co/edit/yPRjxqQkHryqeZKw4YIH?p=preview

Unfortunately, you cannot use integrated browser functions for that. Instead, you need to obtain pixel data:

var data = ctx.getImageData(0,0,canvas.width, canvas.height);

You need to send those to worker. You can use transfer mode for the array:

worker.postMessage( {
                     name: "image_data",
                     data: data.data,
                     width: data.width,
                     height: data.height
                    },
                     [data.data] // this tells browser to transfer data to web worker
);

I modified function from some other answer so that it can scale image using the image data array. It's quite limited, as the scale is only allowed to be integer - that means you can't scale down: https://jsfiddle/n3drn8v9/5/

I remend googling some libraries for this, rather than reinventing the wheel.