显示图像的调整大小的 Base64 输出

Question

我正在努力完成并理解我编写的以下“怪物代码”。基本上，这个函数应该在文件输入对话框 (HTML) 被触发时触发。但是代码运行良好只有几行。它加载图像，然后在第一个 alert() 中向我显示原始图像的 base64，但随后在代码中，当实际图像应该加载到画布中时，它返回（在另一个 alert() ) 高度0，可能意味着图像没有正确加载或根本没有加载。

HTML 输入表单（简化）如下所示：

<input type='File' accept='image/*' onChange='changeBtn(this);' />

还有下面的函数：

function changeBtn(elem) {
    selfile = document.getElementById(elem.id);

    if ('files' in selfile) {
        var file = selfile.files[0];
        if ('name' in file) {
            str1 = file.name;
        }
        if ('size' in file) {
            str1 += ' (' + ((file.size / 1024) / 1024).toFixed(2) + 'MB)';
        }
        document.getElementById("label_" + elem.id).innerHTML = str1;

        var FR= new FileReader();
        var img = document.createElement("img");
        FR.onload = function(e) {
            img.src = e.target.result;
            alert(e.target.result); // Returns B64 of the original image
        };

        FR.readAsDataURL(file);

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 800;
        var MAX_HEIGHT = 600;
        var width = img.width;
        var height = img.height;
        alert(height); // Returns 0

        if (width > height) {
            if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
            }
        } else {
            if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
            }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        var dataurl = canvas.toDataURL("image/png");
        alert(dataurl); // Returns only "data; " and nothing more

    }
} 

提前感谢您的帮助。看起来很简单，但我不明白。我至少重写了 3 次代码，但总是得到相同的结果。

Answer 1

想通了！ 我在将图像加载到其中之前调用了FR.readAsDataURL(file);，导致它加载了一个未定义的文件。

如果我们查看以下失败的代码：

var FR= new FileReader();
var img = document.createElement("img");
FR.onload = function(e) {
    img.src = e.target.result;
    alert(e.target.result); // Returns B64 of the original image
};
FR.readAsDataURL(file);

我们现在知道为什么了。首先调用var FR= new FileReader();，然后调用FR.readAsDataURL(file);，最后，当onload 触发时：img.src = e.target.result;。那是错误的顺序。正确的顺序是：

function changeBtn(elem) {
    selfile = document.getElementById(elem.id);

    if ('files' in selfile) {
        var file = selfile.files[0];
        if ('name' in file) {
            str1 = file.name;
        }
        if ('size' in file) {
            str1 += ' (' + ((file.size / 1024) / 1024).toFixed(2) + 'MB)';
        }
        document.getElementById("label_" + elem.id).innerHTML = str1;

        var FR= new FileReader();

        FR.readAsDataURL(file);

        var img = document.createElement("img");
        FR.onload = function(e) {
            img.src = e.target.result;
            alert(e.target.result);

            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext("2d");

            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 800;
            var MAX_HEIGHT = 600;
            var width = img.width;
            var height = img.height;
            alert(height);

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            var dataurl = canvas.toDataURL("image/png");
            alert(dataurl);
        };
    }
}