javascript - 从本地文件加载时未触发 Javascript 图像加载

Question

我试图让用户在上传图像之前预览图像与另一张图像组合时的外观（想想枪射击子弹）。我可以让图像加载到图像元素中，但是 onload 事件不会触发（在 chrome 和 firefox 中测试）。我尝试使用 setTimeout 作为一个肮脏的黑客，但不幸的是 bullet.image.height 似乎没有在相对较短的时间内设置。

这是我正在尝试做的一个例子：

if (input.target.files && input.target.files[0]) {
    var file = new FileReader();

    file.onload = function (event) {
        // this part works fine
        var bullet = {};
        bullet.id = 0;
        bullet.image = new Image();
        bullet.image.onload = function () {
            // This never fires
            bullet.offset_y = bullet.image.height / 2;

            $('#modal-weapons-field-bullet').append('<option value="0">' + bullet.title + '</option>');
            $('#modal-weapons-field-bullet').val(0);
        };

        bullet.src = event.target.result;
        bullet.offset_x = 0;
        bullet.title = input.target.files[0].name;
    }

    file.readAsDataURL(input.target.files[0]);
}

Answer 1

bullet.src应该bullet.image.src