Base64图片编码原理，base64图片工具介绍，图片在线转换Base64

Base64图片编码原理，base64图片工具介绍，图片在线转换Base64

DataURI 允许在HTML文档中嵌入小文件，可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码，减少 HTTP 请求，加快小图像的加载时间。

经过Base64 编码后的文件体积一般比源文件大 30% 左右。

// Base64 在CSS中的使用
.box{
  background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />

图片在线转换Base64,图片编码base64
https://www.css-js.com/tools/base64.html

支持Base64(DataURI)的浏览器

	Chrome 4+
	Android Chrome 57+
	Firefox 2+
	Android Firefox 52+
	Safari 3.1+
	IOS Safari 3.2+
	Opera 9+	Opera9~11 限制为 64K
	IE 8+	IE8 限制为 32KB
	Mobile IE10+
	Edge12+
	Android UC11+
	QQ Browser1.2+

base64图片编码大小与原图文件大小之间的联系

有时候我们需要把canvas画布的图画转换成图片输出页面，而用canvas生成的图片就是base64编码的，它是由数字、字母等一大串的字符组成的，但是我们需要获取它的文件流大小该怎么办呢？

Base64图片编码原理：

Base64编码要求把3个8位字节（3*8=24）转化为4个6位的字节（4*6=24），之后在6位的前面补两个0，形成8位一个字节的形式。 如果剩下的字符不足3个字节，则用0填充，输出字符使用’=’，因此编码后输出的文本末尾可能会出现1或2个’=’

详情请阅读- base64原理 本地图片base64编码及大小[h5]

http://gj.3gwen.com/tpbase64.html?kbl=

• Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，Base64编码可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性，即所编码的数据不会被人用肉眼所直接看到。

• 在MIME格式的电子邮件中，base64可以用来将binary的字节序列数据编码成ASCII字符序列构成的文本。使用时，在传输编码方式中指定base64。使用的字符包括大小写字母各26个，加上10个数字，和加号“+”，斜杠“/”，一共64个字符，等号“=”用来作为后缀用途。

• Base64编码要求把3个8位字节（3*8=24）转化为4个6位的字节（4*6=24），之后在6位的前面补两个0，形成8位一个字节的形式。 如果剩下的字符不足3个字节，则用0填充，输出字符使用'='，因此编码后输出的文本末尾可能会出现1或2个'='。

• 为了保证所输出的编码位可读字符，Base64制定了一个编码表，以便进行统一转换。编码表的大小为2^6=64，这也是Base64名称的由来。

  base64图片工具介绍

  • 支持 PNG、GIF、JPG、BMP、ICO 格式。
  • 支持查看图片的具体大小。上传过程无需网络。
  • 将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。
  • 假定生成的代码为“data:image/jpeg;base64, .....”，那么你只需要全部复制，然后在插入图片的时候，地址填写这段代码即可。
  • CSS中使用：

    background-image: url("data:image/png;base64,iVBORw0KGgo=...");

  • HTML中使用：

    <img src="data:image/png;base64,iVBORw0KGgo=..." />

  • 图片转换Base64，无线开发、HTML5、CSS3必备的工具，CSS DataURI Base64 工具。
  • 将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。

当我们知道base64编码的图片的字符大小，怎么计算图片的文件流大小呢？？

通过base64编码原理我们知道，base64的图片字符流中的每8个字符就有两个是用0补充，而且字符流的末尾还可能存在‘=’号，我们可以通过这个原理计算图片的文件流大小。

下面举例：

这是一张图片的base64编码：

data:image/png;base64,AAAB.....

AAA==

为了方便，我们用str代替上面编码。

1.需要计算文件流大小，首先把头部的data:image/png;base64,（注意有逗号）去掉。

var str = base64pic.split(",")[1];

2.找到等号，把等号也去掉

var equalIndex= str.indexOf(‘=’);
if(str.indexOf(‘=’)>0)
{
    str=str.substring(0, equalIndex);

}

3.原来的字符流大小，单位为字节

var strLength=str.length;

4.计算后得到的文件流大小，单位为字节

var fileLength=parseInt(strLength-(strLength/8)*2);