base64格式

• data:mime资源类型;base64,图片二进制
  • 图片类型可以使用mime库根据图片后缀进行转换
    

base64介绍

• Base64：是网络中存储和传输的二进制数据的普遍用法。Base64编码格式每个字节的前两位都只能是 0，使用剩下的 6 位表示内容，故一个字节只能表示 64 种情况
  • Base64 最早是应用在邮件传输协议中的。当时邮件传输协议只支持 ASCII 字符传递，使用 ASCII 码来表示所有的英文字符和数字还有一些符号。如果邮件中只传输英文数字等，那么 ASCII 可以直接支持。但是如果要在文件中传输图片、视频等资源的话，这些资源转成 ASCII 的时候会出现非英文数字的情况。而且邮件中还存在很多控制字符，这些控制字符又会成为不可见字符。非英文字符和控制字符在传输过程中很容易产生错误，影响邮件的正确传输。
  • 为此才诞生了一个新的编码规则，把二进制以 3 个字节为一组，再把每组的 3 个字节（24 位）转换成 4 个 6 位，每 6 位根据查表对应一个 ASCII 符号，这就是 Base64。
    • 如果要编码的二进制数据不是 3 的倍数，那就会剩下一至二个字节。为此 Base64 使用 000000 字节值在末尾补足，使其字节数能够被 3 整除，补位用 = 表示，= 的个数可表示补了多少字节，并在解码时自动去除。总体来看相比编码前，Base64 编码后的字符增加了约 33%。
      

优点

• 减少 HTTP 请求；
• 避免跨域问题；
• 可像单独图片一样使用，比如背景图片重复使用等。

缺点

• 体积大：数据体积通常是原数据的体积 4/3，也就是 Data URL 形式的图片会比二进制格式的图片体积大 1/3
• 不会被浏览器缓存：Data URL 形式的图片不会被浏览器缓存
• SEO 受限：搜索引擎优化可能会受到嵌入式 Base64 图片的影响，因为搜索引擎无法为图片分配独立的元数据（例如 alt 属性）或评级。这可能会降低图片在搜索结果中的排名
• 不同的 MIME 类型支持：尽管大部分浏览器支持数据 URI，但各浏览器对不同图像类型和 Mime 类型的支持可能不尽相同。这可能引发兼容性问题
• 难以维护：Base64 图像在文本形式中显示为一长串字符，这使得对嵌入图片进行修改和维护变得困难，尤其是当涉及大量图像时

base64 缓存优化

• 利用css文件：因为css文件是会被缓存的，将base64按照背景图片的形式存放，即可实现缓存

转换 base64 方式

• 通过canvas将图片转base64

 ctx.drawImage(img, 0, 0, img.width, img.height);
 let dataURL = canvas.toDataURL('image/jpeg', quality);

• 通过node的fs模块进行转换

fs.readFile('./a.png', 'base64', (err, data) => {
  // 图片需要在data前加上 'data:image/png;base64,'
  console.log(data)
});

let readStream = fs.createReadStream('./pic.png');
readStream.on('data', function (chunk) {
  console.log(chunk.toString('base64')) 
});

• 通过Buffer转化

let base64 = Buffer.from('把我转化为base64').toString('base64')

• 通过FileReader

let fileReader=new FileReader();
fileReader.readAsDataURL(blob)

支持转换成 base64 的类型