problems with image resizing

Question

I'm trying to resize an image which comes from a Quill editor. I used this links as guides:

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
• Resize image with javascript canvas (smoothly)

This is my code:

async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
        // Resizing
            var img = document.createElement("img");
            img.src = URL.createObjectURL(file);
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, 200, 200);
            var newFile = await new Promise(resolve => canvas.toBlob(resolve));
            document.getElementById("preview").src = URL.createObjectURL(newFile); //check
            
        //Sending data to server   

Expected behaviour: will display a resized version of the image which was sent in a file variable. (if I switch newFile to file, everything works just as expected)

Current behaviour: a white rectangle 300x150px

Could you please help me to find what am I missing?

Answer 1

The reason was the absence of image.onload event handler. This worked for me:

async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
        // Resizing
            var img = document.createElement("img");
            img.src = URL.createObjectURL(file);
            var newFile;
            const promise = new Promise(resolve => {
                img.onload = function (event) {
                            // Dynamically create a canvas element
                            var canvas = document.createElement("canvas");

                            // var canvas = document.getElementById("canvas");
                            var ctx = canvas.getContext("2d");

                            // Actual resizing
                            ctx.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5);

                            canvas.toBlob(blob => {
                                newFile = blob; 
                                console.log(newFile) 
                                resolve();
                            });
                            // Show resized image in preview element
                            //var dataurl = canvas.toDataURL(file.type);
                            //document.getElementById("preview").src = dataurl;
                }
            })
            await promise;
            //var newFile = await new Promise(resolve => canvas.toBlob(resolve));
            document.getElementById("preview").src = URL.createObjectURL(newFile); //check