考虑以下(脆弱的)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
实验测试 我用类似的代码创建了一个简单的测试页面。在Safari我的第一次测试,都是由本地打开HTML网页(file:///URL),并从我的服务器加载它,结果显示一切工作:高度和宽度是正确的,在画布上绘制的作品,并且在onload还火。
file:///
在Firefox v3.6(OSX)中,启动浏览器后加载页面显示高度/宽度在设置后立即不正确,drawImage()失败。(但是onload处理程序会触发。)但是,再次加载页面时,显示宽度/高度在设置并drawImage()工作后立即正确。Firefox似乎将数据URL的内容缓存为图像,并在同一会话中使用时立即可用。
drawImage()
在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 = '...';
由于没有一个目前尚未发现这是怎么任何规格 应该 的行为,我们将不得不与它是如何满足 不 循规蹈矩。以下是我的测试结果。
| 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 ------------+-----------------------------+-------------------------------------
综上所述:
src
如果有人可以找到讨论此问题的规范,我会很乐意接受他们的回答。