大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢？这是Data URI scheme。
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。
在上面的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浏览器都支持这种小文件嵌入。
举个图片的例子：
网页中一张图片可以这样显示：
也可以这样显示：
我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍，O(∩_∩)O~。
原创文章请注明转载于知蚁博客，本文地址：http://www.letuknowit.com/archives/76
相关推荐
base64,base64编码的图像数据`：用于插入图像，其中*代表图像类型如gif、png、jpeg等。图像数据需先用Base64编码。 Base64是一种用于将二进制数据转换为ASCII字符的编码方式，使得这些数据可以在基于文本的系统中...
例如：<img src="data:image/png;base64,这里是base64的编码"/>。 3. 文件大小与编码长度：需要注意的是，Base64编码后的字符串长度大约是原始二进制数据长度的1.33倍。因为Base64编码使用ASCII字符集，所以每三个...
1.base64格式转图片并保存; 2.png字节的图片转jpg字节的图片(流的形式) 3.亲测可以使用，不提供jar，自己下载jar
【标题】"我的网站-源码"所涉及的知识点主要围绕网站开发的源代码，意味着这个压缩包包含了一个网站从设计到实现的所有源文件。... ...它通过一系列标签来定义网页的结构，如`<head>`、`<body>`、`<header>`、`<nav>`、`...
5. 将canvas转换为图片（通常为PNG格式），并提供下载链接或使用`Blob`对象上传到服务器。 五、注意事项 1. 在使用html2canvas时，需注意处理跨域图片，因为安全限制，它可能无法正确渲染。 2. 对CSS的处理要充分，...
端调用方法： xlCrop({params},callback(ret,err)) params: from:”gallery”||”camera”; savePath:默认为cach/... saveName:支持三种格式保存（.jpg,.png,.jpeg...base64Data:base64串：data:image/png;base64,... }
base64,`或`data:image/png;base64,`前缀表示图片类型，后面接Base64编码的字符串。 3. **Base64到图片转换**： - 反向过程是将Base64字符串解码回二进制数据，然后写入到新的图片文件中。 - 在程序中，通常会先...
`<data>`是经过Base64编码的资源数据，如果数据采用Base64编码，则在`<mediatype>`后面加上`;base64`。 在.NET环境中，我们可以使用System.Text.Encoding类的GetBytes方法将图片文件读取为字节数组，然后使用...
.error(R.drawable.error_image) // 错误图 .into(imageView); ``` 5. **尺寸调整与裁剪** 为了优化性能，可以指定图片的大小： ```java Glide.with(context) .load("http://example.com/image.jpg") ....
工作中的小帮手webp2image 引用组件： Imazen.WebP 放入依赖文件（重要必须，否则无法使用，libwebp.dll） 本压缩包为x86兼容64位。 自动保存到原路径：和webp同路径 下拉框：可选保存的文件格式（默认jpg可选Png） ...
base64,"后面跟着Base64编码的图像数据。这种数据URL可以直接插入到`<img>`标签的`src`属性中，使得图像能够在网页上显示。 然而，原生的`toDataURL()`方法可能无法满足所有需求，比如可能需要调整图片质量、添加...
canvas.toDataURL('image/png').replace('data:image/png;base64,', '') .split(',')[1] .toString('base64') .then(function(dataUrl) { var link = document.createElement('a'); link.download = '...
在某些场景下，Base64编码的图片字符串会包含额外的信息，例如"data:image/*;base64,"，这通常出现在HTML的`<img>`标签中。在解码这种形式的字符串时，需要先去除前缀，只保留Base64编码的部分： ```java public ...
可以将本地图片或网络转为base64字符串。压缩包内包含使用说明pdf。压缩后的结果类似为data:image/png;base64,/9j/4AAQSkZJRgABAQEAAQABAAD= 代码可以自行修改
#功能验证：打开浏览器在地址栏输入data:image/png;base64,base64文件内容 回车即可显示原图片 #=======================参数区域=================================================== #是否合并false/true：即是否...
在用canvas将png图片转jpeg时，发现透明区域被填充成黑色。 代码如下： XML/HTML Code复制内容到剪贴板 <p>Canvas：</p> style></canvas> <p>Base64转码后的图片：</p> <div u00a0id=base64Img>...
base64,"的格式，这里的{type}代表图片的原始格式，如png、jpeg等。这种格式可以直接用于HTML的`<img>`标签，例如： ```html <img src="data:image/jpeg;base64,/9j/4AAQSk... (此处为Base64编码的字符串) /9k="/> ...
这里的`<mediatype>`表示数据的类型，例如`image/gif`代表GIF图片，`<data>`是实际的数据，如果使用base64编码，则会添加`base64`作为分隔符。例如，一个简单的2x2白色GIF图片的Data URI可能是这样的： ```html ...
微信小程序剪切头像功能,二维码功能，页面只有一个，方便做数据处理，并进行了图片压缩转换，最后...let img_base64 ='data:image/png;base64,' + wx.getFileSystemManager().readFileSync(res.tempFilePath,'base64')