canvas.toDataURL () возвращает черное изображение, пытаясь изменить размер строки base64

В настоящее время я пытаюсь изменить размер изображений base64, так как файлы изображений слишком велики, чтобы обрабатывать их позже с помощью php. Я нашел способ добиться этого, изменив размер изображения с помощью холста. К сожалению, я получаю только черное поле шириной 300 пикселей и высотой 150 пикселей. Возможно, это имеет какое-то отношение к img.onload и canvas.toDataURL(), или я просто использую неправильное событие (img.onload). Любая идея, где может быть ошибка?

function exportImg(val){  
                var imageData = $('#image-cropper').cropit('export', {originalSize: true});
                imageData = imageData.replace(/^data:image\/[a-z]+;base64,/, "");

                var imageDataRes = resize(imageData);


                $.post('php/upload.php', { imageDataRes: imageDataRes });
        }



function resize(base64){
            // Max size for thumbnail
            var maxWidth = 900;
            var maxHeight = 900;

            // Create and initialize two canvas
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            var canvasCopy = document.createElement("canvas");
            var copyContext = canvasCopy.getContext("2d");

            // Create original image
            var img = new Image();
            img.src = base64;

            img.onload = function(){

                // Determine new ratio based on max size
                var ratio = 1;
                if(img.width > maxWidth) {
                    ratio = maxWidth / img.width;
                }
                else if(img.height > maxHeight) {
                    ratio = maxHeight / img.height;
                }


            // Draw original image in second canvas
            canvasCopy.width = img.width;
            canvasCopy.height = img.height;
            copyContext.drawImage(img, 0, 0);

            // Copy and resize second canvas to first canvas
            canvas.width = img.width * ratio;
            canvas.height = img.height * ratio;
            ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);

            }
            alert(canvas.toDataURL());

            return canvas.toDataURL();
        }

РЕДАКТИРОВАТЬ:

Что такое асинхронный процесс в этом случае и как его решить? Извините, но, к сожалению, я не вижу, как это может помочь мне дальше. $.post отлично работает, я получаю изображения. Я просто не понимаю идею img.onload и toDataURL() и как я должен анализировать их с одной функции на другую. Сначала я получил пустой результат, без строки вообще (только data,), но, добавив эту img.onload я наконец получил строку base64... но это был просто черный экран.