Resizing a image with Javascript without rendering a canvas on the DOM

Question

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.

Answer 1

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">