图片转Base64字符串

有些时候,我们需要将图片转换成base64字符串的形式直接插入到前端页面中或者保存起来,所以在这里总结一下图片转base64的方法以及如何对图片进行一定的压缩处理

base64编码原理

Base64本质上是一种将二进制数据转成文本数据的方案。对于非二进制数据,是先将其转换成二进制形式,然后每连续6比特(2的6次方=64)计算其十进制值,总而言之就是每3个原始字符编码成4个字符,如果原始字符串长度不能被3整除,怎么办?使用0来补充原始字符串
以字符串以Hello!!为例,其转换过程为:)

Hello!! Base64编码的结果为 SGVsbG8hIQAA 。最后2个零值只是为了Base64编码而补充的,在原始字符中并没有对应的字符,那么Base64编码结果中的最后两个字符 AA 实际不带有效信息,所以需要特殊处理,以免解码错误。

标准Base64编码通常用 = 字符来替换最后的 A,即编码结果为 SGVsbG8hIQ==。因为 = 字符并不在Base64编码索引表中,其意义在于结束符号,在Base64解码时遇到 = 时即可知道一个Base64编码字符串结束。

如果Base64编码字符串不会相互拼接再传输,那么最后的 = 也可以省略,解码时如果发现Base64编码字符串长度不能被4整除,则先补充 = 字符,再解码即可。

解码是对编码的逆向操作,但注意一点:对于最后的两个 = 字符,转换成两个A 字符,再转成对应的两个6比特二进制0值,接着转成原始字符之前,需要将最后的两个6比特二进制0值丢弃,因为它们实际上不携带有效信息。
原文地址

图片转base64字符串

将图片转成base64原理上就是将图片绘制在canvas,然后再通过canvas的toDataURL方法画布转成base64字符串的过程
具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function image2Base64(imgFile, callback){
var reader = new FileReader()
reader.readAsDataURL(imgFile)
var that = this
reader.onload = function () {
var result = this.result
var img = new Image()
img.src = result
img.onload = function(){
// 创建用于压缩图片的canvas
var canvas = document.createElement("canvas")
var ctx = canvas.getContext('2d')
var width = img.width
var height = img.height
canvas.width = width
canvas.height = height
//透明背景
ctx.fillStyle="rgba(255,255,255,0)";
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(img, 0, 0, width, height)
// 第二个参数为1 不进行压缩处理
var base64 = canvas.toDataURL('image/png', 1)
callback(base64)
}
}
}

总结

将图片装换成base64进行保存有利有弊,好处是可以直接将base64字符串保存到页面中避免了网络传输所损耗的时间。
缺点是很明显将二进制文件转换成base64字符串会增加文件的大小。

所以通常情况下会把一些图表类型的小图片文件转换成base64进行直接显示。