使用data URI scheme在网页中内嵌图片使用介绍
脚本之家
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以在Html、CSS、Javascript 等中使用。
data URI scheme 经常用来将图片嵌入网页,使用如下:
<img alt="鹤冲天的头像(您的浏览器不支持 data URI scheme,图片无法显示)" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBcQFxAAD/2wBD/*此处省略很多数据*/NONPmfvcqcdZR7XT27n//2Q%3D%3D"/>
data URI scheme 格式如下:
data:[<MIME-type>][;base64],<data>
这个格式比较简单,对照一下可得知,上面的 img 是一个使用 base64 编码的 jpg 图片。
将这个 img 嵌入到本页面中,显示如下:
![鹤冲天的头像(您的浏览器不支持 data URI scheme,图片无法显示](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBcQFxAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAQECAQEBAgICAgICAgICAQICAgICAgICAgL/2wBDAQEBAQEBAQEBAQECAQEBAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgL/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4%2BTl5ufo6erx8vP09fb3%2BPn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3%2BPn6/9oADAMBAAIRAxEAPwD8PY9ej8UR2ttY6bb6Xa/2fAlpeNKkM9nCz7rq4gt1GYyflCbsMducDNaOlfCvx1a6xEnhe6gsdN1Z1aDUdSuBeahKu4PLLHbAYjySTntmu5b4aaBCbGbSw1rb204uHutUuPLNwuCSJURuFyc8jHoBXt3wu%2BDHxQ%2BJPinT5Phh4f8AFPjCXTX2yP4fsLq80yMEjdbx37ILWBjkcSSKcV/TNXAuMo1M1lyqm4JVIVY0ko/bs2oqyjdaO/ur3rI%2BNhXTTWF%2B0neMoOV5dG7N63730e2pa0n4aWej2dx/aWuw6zq91CqXBvVkmG8RjankuSIkDDgKB/Oug8N%2BGLICfV9MuJJdUsoQl9p94sQz5LAoluikeVAAvAGeMZ71986P/wAEzP2q/GltLrSPoHgWdijnTPEmpxnUQkcatK1wtjDIkA64%2BZvuk%2B1fNPjH4JfFbw14vX4S3nh%2B/wBU%2BIlnqA0u3l8N2c9/d3l1OiNbCGC1i331pLbSRyxPtw8UqvwCcfQYLMsixFXE08vnTqrLouTcJ3ur2U1Jyb0b1nJOF5WlJXuebXw%2BPpqm8VKSliml7y8k%2BVrlStpok1Kyukz5C%2BKht9b8W%2BENXvdNk057RLxS9hp5vYjcrGXtx5rtsjLFCSdoYAZxXV%2BC/BOi63Iuq69LJqOqxTpcpaWt1LOxldgI3vWjPKhTjbgKMV5h49Pxftfifo3grUbe/wBW0/wHZ%2BI7TWbOwWUWvhub%2B147a%2BuNbgtz5aX3nSfZw0pLkqY1bAxX1P4F8H33gDwnrOrabG91PcQtcRC7gCXDzSYcrG2fuqxAA9hXgZLOpm2a5pisXhI1aNGrKU/tNJU4eznKCbhOTjFNOFkm3o7o9HMFSweEwlDD1nTqVIxUbtLVv3lF8qcY3b3u7JK90eU/s6abp1/8UPBdj8Q/DNvq/wAOYdXRtU0%2B5v5Gkv2eN1tBrV1G6qulpdmF54jNGJY1aN5I1YuP6QNc/bs/Z/8AgB4Yg8GfDvSbHxNrsOmGKCw8G2um6B4Q0q9SAi10wajNAnnhZCihoLWZAAS5U5jr%2BXmx%2BL3iLXbSeTwrpDaakESQmyS3W1iSWSQKJjd7QH%2BVgcc4613nh/4W/FHXrm28RS3QvbyR4y6C5mkhtQGVlePYcNIFGDkVy4vC5FmtbDyTr5uoJe65xpUuRPRp2u7fyLlbteWxrReOoQqOo6eCV9HZzlzO26213vr5Lt%2Bo37Af/BWzxT8e/wBpn44%2BGfiv4en8CeHtA0WO8h0K4u59QPhq08P6oml6m2p6j9khWfUbi91FdiLDG8puFjijYRMV/ok%2BAtx8Kb7xbB8W08GafqviS90OPQtL8aNb276mnhyRVlsoYJYQwlCRy7VlGZRG5TeV4r%2BSz4Rf8E%2BPAuofFDVvjx8af2rvEPwh0TxDaRjxb4I%2BHnh6aLUNastJ0m6soL/WfEn2We1064iSa9ulle3uJY52jm2xTIjj%2Brj4G3nwN8B/DfwTpfwiu9Eufh/4Z0nSvCXhj7Nqcmo3CJpmm2sVppc1/qM8l1eaotmYGmM8j3DFy8xLEk/l%2Bc4fE5XVxdKnhq6i5VKfteV04VaN3yJOPuO6WqTavGyT3Xv4WpTxMaUpVabklF8t1JxkrXtfXfra%2Bp%2BWn/BSr4bfswfsP/s7eKfCfgHQbv8A4Wh%2B1p8W7PUL7W9Xum1PXXsv7fuPEutXEl6Yh/Y%2BhW1zcRxwQxoiySPhi0i7j%2BQl9e6trWl2ekaa1xJ4d0qLdqHiERSpFJKwBmjjY8zBM4z049s1q/8ABW/46fE39oP4u6p4iubC807w78M/EknhHwTpUEijTF07TdUa3uL6W5YkyXN3eRNLIygLgIqjglvN/h5qnxDuPCtjDrlrHa6bIkTPbWLM/wBoVQHZJZGGNpI54ya/VuAssxeAeLyis5yr42jQxMpJ2jaopWpyle0UuRKVvebTUdD5nPsTSxEaOOio8tCc6aTvunH3kt2%2B261TPj/RPGdt/wAIQIdLsLqLTwLcj7XatDJcyArueNioYJg8Z/Svsv4MeP4tI02NrmSWwsFVJZPtWXQyYXgMQflJPNfqgv8AwSW0nxNpVnpOt%2BPbcRQmIs%2BnaethIyptDRHyY9pQhevH5mva/Df/AAR%2B%2BEsGnDTrvxZrU0RUqQl5cAZI5KgMMfy9q%2BZw9ethKlOo6Uq6p0%2BVaKFpJ7crei87tNHuVfq1WEqbqRgpy6JtNaa3t010tv6H5Q6t8SNX8Q3gtor%2B1gtYwwSGF0/0iHbuLbc8qUJyPevRPhz488e3Xw4%2BIiWFzqz6pZ6t4mn8Jafp%2BpyQJp8mjSHQIdRswrBba%2BmfS7qZ5MbwJgoO1VFfr14Z/wCCQHwKintJ77XNbna1xsH2icsxClQGYy8jBHUYr6K8Df8ABMb4E%2BEonjtLvVv9IlvZZ8SSbXOoXU13ccF/utLcykjvuNb1M/xFWVKOKwc40Y3Uo3pu14OKlH3rXXNJavVHL9RwcVN0cUva2Vnyz6NNpu17O2uh/O1%2B1folmfhRr%2Bq2kcGo29u%2Bla7BcTFTcPDdXEN0srsxy5dZMknrnJrqPDWnaDL4J8NXt0VtFudDs71441GwI1srk/KOGOD9c1/RbqX/AAS8/Z48U6Pd6Drb6tf6Te2cVjd2kr/LJawuWtoUy3yqgIUAfwqAMYrqtA/4Jg/s06Bplppltpd5Na2UMdvbx3MkkxWGNcLGwlkIC4zxjipq8YZhgcfVxuX4SNSpXo06LU5uC/dynJTuozW07WtdWKo5XltXDxoYvFSpqE3NONPmfvcqcdZR7XT27n//2Q%3D%3D)
除了 base64 编码,还可以使用 %xx 形式的 16进制URL编码,如下:
<img alt="鹤冲天的头像(您的浏览器不支持 data URI scheme,图片无法显示)" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略很多数据*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/> _fcksavedurl=""data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略很多数据*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>" _fcksavedurl=""data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略很多数据*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>"
生成图片数据
根据上面的格式,我们可以编写一个小程序进行生成,但我们不需要这么麻烦,有很多网站提供这种(免费)服务。
data URI scheme 经常用来将图片嵌入网页,使用如下:
<img alt="鹤冲天的头像(您的浏览器不支持 data URI scheme,图片无法显示)" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBcQFxAAD/2wBD/*此处省略很多数据*/NONPmfvcqcdZR7XT27n//2Q%3D%3D"/>
data URI scheme 格式如下:
data:[<MIME-type>][;base64],<data>
这个格式比较简单,对照一下可得知,上面的 img 是一个使用 base64 编码的 jpg 图片。
将这个 img 嵌入到本页面中,显示如下:
除了 base64 编码,还可以使用 %xx 形式的 16进制URL编码,如下:
<img alt="鹤冲天的头像(您的浏览器不支持 data URI scheme,图片无法显示)" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略很多数据*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/> _fcksavedurl=""data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略很多数据*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>" _fcksavedurl=""data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略很多数据*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>"
生成图片数据
根据上面的格式,我们可以编写一个小程序进行生成,但我们不需要这么麻烦,有很多网站提供这种(免费)服务。
下面给出几个:
1.http://dataurl.sveinbjorn.org/dataurlmaker
提供预览,复制方便。
2.http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
提供预览, 还能生成相应的CSS的URI data。
3.http://software.hixie.ch/utilities/cgi/data/data
提示:生成不仅限于图片数据,可以使用三种方式(参见下图中的1、2、3),可以指定编码方式,但界面不友好。
在小组发言中使用
点击 插入/编辑图片 按钮:
弹出下面的窗口,使用上面任意一个网址,生成图片数据,复制粘贴至图片地址文本框中:
点击插入,OK了,如下图: