Question

我正在努力完成并理解我写的以下'monstercode'。基本上，当触发文件输入对话框（HTML）时，应该触发此函数。但代码只进行了几行。它加载图像，然后在第一个alert()中它向我显示原始图像的base64，但后来在代码中，当实际图像应该在画布中加载时，它返回（在另一个{ {1}}）高度alert()，可能意味着图片未正确加载或根本没有加载。

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

以下功能：

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

提前感谢您的帮助。看起来很简单，但我不明白。我重写了至少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);，然后调用img.src = e.target.result;，最后，当onload触发时

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);
        };
    }
}

。这是错误的订单。正确的顺序是：

pthread_join()

显示图像

1 个答案: