javascript - jQuery 图像加载在 Safari 中不起作用

Question

以下代码用于设置 img 的属性，然后在 img 加载时执行某些操作。

这在 Chrome 和 FireFox 中工作正常，但是 let img..etc 行在 Safari 中永远不会被命中。为什么是这样？

$("<img/>").attr("src", "data:image/*; base64," + base64).on("load", (e) => {
        let img = e.currentTarget;
        context.scale(width / img.width,  height / img.height);
        context.drawImage(img, 0, 0);
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));
    });

我已经尝试使用 Safari 的技术预览版，但无济于事。这发生在 Mac 和 iPhone 上。

编辑:

根据 Cross-browser image onload event handling

我试过了，没用:

var image = $('<img/>');
image.on('load', e => {
    let img = e.currentTarget;
    context.scale(width / img.width,  height / img.height);
    context.drawImage(img, 0, 0);
    deferred.resolve($('<img/>').attr('src', canvas.toDataURL()));
});
image.attr('src', 'data:image/*; base64,' + base64);

我也尝试过使用普通的 javascript

var image = $('<img/>');
image.onload = function(e) {
    let img = e.currentTarget;
    context.scale(width / img.width,  height / img.height);
    context.drawImage(img, 0, 0);
    deferred.resolve($('<img/>').attr('src', canvas.toDataURL()));
};
image.src = "data:image/*; base64," + base64;

Answer 1

您的数据 URL header 格式不正确:

参数的分隔符应该是;，没有空格。

Chrome 和 Firefox 在允许它方面做得很好。

"data:image/*;base64,"+ base64 应该可以工作。

var base64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=='

var willWork = new Image();
willWork.onerror = willWork.onload = e => console.log('without space', e.type);
willWork.src = "data:image/*;base64," + base64;

var willFail = new Image();
willFail.onerror = willFail.onload = e => console.log('with space', e.type);
willFail.src = "data:image/*; base64," + base64;

但请注意，尽管我不知道浏览器是否支持此功能，但通过设置正确的 MIME 而不是通配符 image/* 会更安全。