小编典典

将图像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 = '...';

阅读 301

收藏
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