Sometimes, we want to downscale HTML5 canvas image with JavaScript.

In this article, we’ll look at how to downscale HTML5 canvas image with JavaScript.

How to downscale HTML5 canvas image with JavaScript?

To downscale HTML5 canvas image with JavaScript, we use the blitz-hermite-resize package.

To install it, we run

npm install blitz-resize --save

Then we use it by writing

const blitz = Blitz.create();

//...

const output = await blitz({
  source,
  width: 400,
  height: 600,
});

to call blitz with an object with the image source and the width and height to scale the image to.

source can be a DOM img element, DOM canvas element, jQuery element, base64 data URL string, or a File object.

It returns a promise with the resized image.

output is an object with the image in DOM img element, DOM canvas element, jQuery element, base64 data URL string, and a File object,

Conclusion

To downscale HTML5 canvas image with JavaScript, we use the blitz-hermite-resize package.