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.
