js手札--图片的Base64编码

最新推荐文章于 2024-01-19 19:36:09 发布

weixin_34007886

最新推荐文章于 2024-01-19 19:36:09 发布

阅读量117

点赞数

文章标签：网络 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000008666139

版权

一、Base64编码

在聊图片编码之前，先来说说Base64编码，其实这一块已经有很多例子了。

Base64编码么，其实就是一个招待好6爷，伺候好8爷的过程

Base64是把字符串转为二进制，然后末尾补零，使总长度能除尽24

24这个太上皇怎么来的：是6爷与8爷的公倍数

6爷怎么来的: Base64是一个对照表，有64个符号，大小写字母，数字，加号，斜杠（/）。特殊字符（=）除外可以用6个二进制位来表示这个64个字符

8爷怎么来的：一个字符8位(ASCII码对应二进制)

1.Base64是因为有64个字符来做对照，所以，可以用6个二进制位数来表示（编码过后的字符）：如：

『000000』代表A，『111111』代表/

2.所以嘛，我们需要做的就是把要编码的字符（一个字符8位，对照ASCII）6等分，这样好用Base64来表示，如：

A => 『01000001』=>（6等分）  『010000』『01』

3.但你也看到了，最后的不足6位啊，那没问题，补零，就行了

『010000』『010000』

4.这样的东东，在Base64中是能找到对应的值，但是，我要把他在转换成正确的字符A就不行了

『010000010000』=> A『0000』

5.缺了4位，那咋办，那就再添加4位咯

『010000010000』=> 『010000』『010000』『0000』

6.但加了4位又不能用Base64来表示了，少了2位，唉，既要伺候好6爷，又得服侍好8爷真心不容易啊，其实添了2还是不行的，反正就是这么补0下去，最后就变成了

『010000』『010000』『000000』『000000』

用Base64一对照看到是（0用=表示）QQ==

图片的Base64编码

例如：url：data:text/jpeg;base64,XXXXXXX==

data:[<mime-type>];[<chartset>=chartset];[<encoding>],<encoded_data>

/**
  data:font/woff，字体
  data:text/plain,文本数据
  data:text/html,HTML代码
  data:text/css;base64,css代码
  data:text/javascript;base64,javascript代码
  data:image/x-icon;base64,base64编码的icon图片数据
  data:image/gif;base64,base64编码的gif图片数据
  data:image/png;base64,base64编码的png图片数据
  data:image/jpeg;base64,base64编码的jpeg图片数据
*/
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}