Question

我目前正在尝试调整base64图像的大小，因为图像文件太大而无法在以后使用php处理。我已经找到了通过使用画布调整图像大小来实现这一目标的方法。不幸的是，我得到的图像只是一个300px宽和150px高的黑场。也许它与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字符串的大小来生成黑色图像

1 个答案: