将图像src设置为数据URL是否应该立即可用？

小编典典

将图像src设置为数据URL是否应该立即可用？

javascript

考虑以下（脆弱的）JavaScript代码：

var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data

// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );

// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };

问题

图像的宽度和高度是否应该立即正确？
画布绘制是否应该立即工作？
是否应该onload调用回调（在更改src之后设置）？

实验测试
我用类似的代码创建了一个简单的测试页面。在Safari我的第一次测试，都是由本地打开HTML网页（file:///URL），并从我的服务器加载它，结果显示一切工作：高度和宽度是正确的，在画布上绘制的作品，并且在onload还火。

在Firefox v3.6（OSX）中，启动浏览器后加载页面显示高度/宽度在设置后立即不正确，drawImage()失败。（但是onload处理程序会触发。）但是，再次加载页面时，显示宽度/高度在设置并drawImage()工作后立即正确。Firefox似乎将数据URL的内容缓存为图像，并在同一会话中使用时立即可用。

在Chrome v8（OS X）中，我看到的效果与在Firefox中的效果相同：该图像无法立即显示，但是需要一些时间才能从数据URL异步“加载”。

除了实验证明上面的浏览器可以正常工作还是不能正常工作外，我真的很喜欢指向规范的链接。到目前为止，我的Google-fu尚未完成任务。

安全使用
对于不了解上述原因为何有危险的人，请知道使用以下图像是安全的：

// First create/find the image
var img = new Image;

// Then, set the onload handler
img.onload = function(){
  // Use the for-sure-loaded img here
};

// THEN, set the src
img.src = '...';

阅读 302

2020-04-25

共1个答案

小编典典

由于没有一个目前尚未发现这是怎么任何规格应该的行为，我们将不得不与它是如何满足不循规蹈矩。以下是我的测试结果。

        | is image data usable right  | does onload callback set after src
        |     after setting src?      |   is changed still get invoked?

------------+-----------------------------+-------------------------------------
Safari 5 | yes | yes
------------+-----------------------------+-------------------------------------
Chrome 8 | no (1st page load), but | yes
FireFox 3.6 | yes thereafter (cached) |
------------+-----------------------------+-------------------------------------
IE8 | yes (32kB data limit) | yes
------------+-----------------------------+-------------------------------------
IE9b | yes | no
------------+-----------------------------+-------------------------------------

综上所述：

您不能假设在设置data-uri后立即可以使用图像数据；您必须等待onload事件。
由于IE9，您无法onload在设置src并希望调用它后设置处理程序。
“安全使用”中 的建议（来自上述问题）是确保正确行为的唯一方法。

如果有人可以找到讨论此问题的规范，我会很乐意接受他们的回答。

2020-04-25