在python 视频查看中,偶然发现 img 标签的 src 属性可以添加base64 的文本。没见过,记录一下
参考:https://blog.csdn.net/qq_18979049/article/details/78610502

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>img</title>
  5. </head>
  6. <body>
  7. <h1>图片</h1>
  8. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI4AAAAyCAYAAACK9eMGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFQTQ3MzJBRkYwNDExRUFBN0JDQUQxNzVBQ0VERjAyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFQTQ3MzJCRkYwNDExRUFBN0JDQUQxNzVBQ0VERjAyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0VBNDczMjhGRjA0MTFFQUE3QkNBRDE3NUFDRURGMDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0VBNDczMjlGRjA0MTFFQUE3QkNBRDE3NUFDRURGMDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6xHA0yAAAL+0lEQVR42uxd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"/>
  9. </body>
  10. </html>

显示效果:
image.png

小结

在浏览器中 F12 查看 img ,有的 src 就是 data:image/(png/gif等);base64,数据 的格式。如果想要把图片转为 “data:image/xxx;base64,数据”,可以在对应的请求上右键,选择copy response,粘贴到文本中,就是对应的图片文件的 base64 了。

Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。

Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
  目前,Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
  base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

参考:https://www.cnblogs.com/oneroundseven/archive/2011/05/09/2040911.html
https://www.cnblogs.com/oneroundseven/archive/2011/05/09/2040911.html

完整的语法定义

在RFC中,完整的语法定义如下。

  1. dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
  2. mediatype := [ type "/" subtype ] *( ";" parameter )
  3. data := *urlchar
  4. parameter := attribute "=" value