Resizing a image with Javascript without rendering a canvas on the DOM
image-resizing, javascript, typescript
Solution
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">
Problem
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.