Estoy tratando de cambiar el tamaño de un archivo que obtengo de Quill y enviarlo a un servidor. Esto es lo que tengo
async handleImageAdded(file, Editor, cursorLocation, resetUploader) { // Resizing var newFile const reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); 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, 300, 300); // Show resized image in preview element canvas.toBlob(blob => { newFile = blob; console.log(newFile) }); } img.src = e.target.result; } reader.readAsDataURL(file); console.log(newFile) //Sending data to server } Quiero hacer que este código funcione de forma 'async/await', por lo que el segundo console.log(newFile) también devolvería un valor correcto, desafortunadamente, no sé cómo actualizar el código.
Cualquier ayuda es enormemente apreciada :-)
Necesitas ponerlo dentro de una promesa.
var newFile const reader = new FileReader(); const promise = new Promise(resolve => { reader.onload = function (e) { var img = document.createElement("img"); 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, 300, 300); // Show resized image in preview element canvas.toBlob(blob => { newFile = blob; console.log(newFile) resolve(); }); } img.src = e.target.result; } }); reader.readAsDataURL(file); await promise; console.log(newFile)