canvas.toDataURL() 通过尝试调整 base64 字符串的大小来生成黑色图像

Question

我目前正在尝试调整 base64 图像的大小，因为图像文件太大，以后无法使用 php 进行处理。我找到了一种通过使用 canvas 调整图像大小来实现此目的的方法。不幸的是，我得到的图像只是一个 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 字符串……但它只是黑屏。

Answer 1

需要等待onload事件，然后使用全局变量保存数据，最后调用上传函数。

试试这个：

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

                  resize(imageData);

        }


var SendWhenisReady = function(imageDataRes){

 $.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());
                 window['imageDataRes'] = canvas.toDataURL();
                 SendWhenisReady(window['imageDataRes'])
            }



        }

canvas.toDataURL() 通过尝试调整 base64 字符串的大小来生成黑色图像

canvas.toDataURL() results black image by trying to resize base64 string

javascript

image

canvas

base64

image-resizing