浏览器如何处理图像源？

Question

[更新] 我发现两个对我有用的链接：

  

http://mrcoles.com/blog/canvas-composite-operations-demo-animation/

     

http://tutorials.jenkov.com/html5-canvas/composition.html

最近，当我学习画布时，我发现有多种方法可以指定图像src：

1. 您可以提供图片URI，例如：www.XYZ.com/abc.png

2. 您可以提供数据URI，例如：data:image/svg+xml;base64,'+ hexcode;

3. 您可以从画布中提供数据URI，例如：canvas.toDataURL("image/png");

我对它们之间的区别有什么不确定，并想知道浏览器如何处理它们？

由于

Answer 1

这只是浏览器支持的问题。浏览器将查看字符串的协议标头，如果它识别它，请尝试解释它。例如：

如果它以“http：//”或“https：//”开头，它将解析字符串的其余部分作为基础。然后尝试使用HTTP（S）协议连接到服务器并通过此协议进行通信。协议本身在RFC中指定。如果一切正常，则数据从服务器传输到浏览器，然后进入下一步解释接收到的数据本身（这可能发生在数据完全加载期间或之后）。

如果字符串以“data：”开头，则浏览器将采用Data-URI协议（如果它支持此协议）。如果没有，它会认为源无效。因为在这种情况下它不需要连接到任何外部资源，它将验证它的内容并在有效时使用它。 Data-URI将转换为二进制数据（base-64表示将转换回二进制形式）。

（2.和3.是相同的BTW。它不是附加的十六进制代码，而是一个base-64编码的字符串，即ASCII表示。其他表示是可能的但不常见）。

然后还有浏览器可能支持的其他协议，例如Blob-URL，也许某些浏览器会允许FTP（ftp：//），有些允许file：//给定某些限制。