I've seen this interesting thread among many others: Resize a Base-64 image in JavaScript without using canvas
However when i create an off screen canvas using
const canvas = document.createElement('canvas');
the result image is transparent and the size does not even match the parameters. If i draw on a canvas from the DOM everything works fine
const canvas = document.getElementById('canvas');
Here is my resize function that keeps the input image ratio :
resizeImage(file) {
const canvas = document.createElement('canvas');
// const canvas = document.getElementById('canvas');
const context = (<HTMLCanvasElement>canvas).getContext('2d');
// set maximum width and height of output image
const maxW = 400;
const maxH = 400;
const img = new Image;
img.onload = function () {
const iw = img.width;
const ih = img.height;
const scale = Math.min((maxW / iw), (maxH / ih));
const iwScaled = iw * scale;
const ihScaled = ih * scale;
console.log(iwScaled + ' ' + ihScaled);
(<HTMLCanvasElement>canvas).width = iwScaled;
(<HTMLCanvasElement>canvas).height = ihScaled;
context.drawImage(img, 0, 0, iwScaled, ihScaled);
}
img.src = URL.createObjectURL(file);
// retrieve output img in base64 format
console.log((<HTMLCanvasElement>canvas).toDataURL());
}
It takes a file (File) from a HTML input as parameter. Any help would be appreciated, thank you.
Image resizing in JavaScript - Using canvas element. The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. Resizing images in browser using canvas is relatively simple. drawImage function allows us to render and scale images on canvas element.
One way to do this is to use a program like Photoshop. With Photoshop, you can resize an image without losing quality by using the "Image Size" dialog box. In the "Image Size" dialog box, you can change the width and height of the image. You can also change the resolution.
you get a Base-64 image when load is complete.
function resizeImage(file) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var maxW = 400;
var maxH = 400;
var img = document.createElement('img');
img.onload = function() {
var iw = img.width;
var ih = img.height;
var scale = Math.min((maxW / iw), (maxH / ih));
var iwScaled = iw * scale;
var ihScaled = ih * scale;
canvas.width = iwScaled;
canvas.height = ihScaled;
context.drawImage(img, 0, 0, iwScaled, ihScaled);
console.log(canvas.toDataURL());
document.body.innerHTML+=canvas.toDataURL();
}
img.src = URL.createObjectURL(file);
}
document.getElementById("file").addEventListener("change", function() {
file = file.files[0];
if (file) {
resizeImage(file);
}
});
<input id="file" type="file">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With