Tengo la función base64SquareCrop que cambia el tamaño de las imágenes, el problema aquí es que no puedo devolver el valor de la función de carga y se devolvió sin definir:
async function base64SquareCrop(imgbase64, size = 224) { const img = document.createElement("img"); await img.setAttribute("src", imgbase64); let width = 1240; let height = 698; const min = Math.min(width, height); const scale = size / min; const scaledW = Math.ceil(width * scale); const scaledH = Math.ceil(height * scale); const dx = scaledW - size; const dy = scaledH - size; canvasImage.width = canvasImage.height = size; const ctx_img = canvasImage.getContext("2d"); img.onload = function() { ctx_img.drawImage( img, ~~(dx / 2) * -1, ~~(dy / 2) * -1, scaledW, scaledH ); return canvasImage.toDataURL("image/png"); } }Tienes que usar promesas para esperar el evento de carga.
function base64SquareCrop(imgbase64, size = 224) { const img = document.createElement("img"); await img.setAttribute("src", imgbase64); let width = 1240; let height = 698; const min = Math.min(width, height); const scale = size / min; const scaledW = Math.ceil(width * scale); const scaledH = Math.ceil(height * scale); const dx = scaledW - size; const dy = scaledH - size; canvasImage.width = canvasImage.height = size; const ctx_img = canvasImage.getContext("2d"); var loadPromise = new Promise(function (resolve) { img.onload = function() { ctx_img.drawImage( img, ~~(dx / 2) * -1, ~~(dy / 2) * -1, scaledW, scaledH ); resolve(canvasImage.toDataURL("image/png")); } }, function (reject) {reject("ERROR!")}); return loadPromise; } A partir de ahí, deberá await base64SquareCrop(...) dentro de una función asincrónica. No conozco otra forma mejor de hacerlo.