I'm trying to resize an image which comes from a Quill editor. I used this links as guides:
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?
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