图片的base64编码

导语

前端对图片的处理一直以来是一个非常值得研究的点。这里简单的介绍其中的一种：图片的base64编码

什么是base64编码

Base64就是一种编码格式。Base64要求把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24），然后把6Bit再添两位高位0，组成四个8Bit的字节。编码后的字符串理论上比原本的数据长三分之一。
图片的base64编码就是将一幅图片的数据编码成字符串，使用这个字符串来代替图像的地址。

base64编码图片的优缺点

网页上的所有图片，都是要一个http请求下载来的。举个例子你的博客里有4张图，采用的是网络链接取址，那么就会有4个http request去那些图片的地址将图片下载到浏览器的缓存来渲染页面，再加上本来需要下载html的一个request，整来就少说5个了。一般大家会整个图床啥的，这样问题也不是很大，因为request的负载都到图床去了，但是也有人在自己的服务器上搞相对地址，在并发高的情况下很有可能自己服务器就撑不住了。而base64是和html的request一起传输的，因此就会少很多的request。同时也不会有跨域请求，不需要定时清理图片的缓存了。
但是base64之后的字符串长度惊人，常常会分割代码，让整个代码非常的不好读。我们的md有一个id调用的方法来缓解。此外有些浏览器对base64图片不支持（IE8以下，应该没人还在用这了吧），也有些浏览器对base64的大小有限制。

优点

①减少了网络请求：采用http形式的url的话都会额外发送一次请求，网页发送的http请求次数越多，会造成页面加载速度越慢。
②不会造成跨域请求的问题：因为采用Base64编码的图片是随着页面一起加载的。
③不会造成清理图片缓存问题。

缺点

①数据传输量变大，代码的可读性不高。
②对于IE 8以下的浏览器不可使用，IE 8以上的浏览器可以使用，但对大小做出了限制。

#base64编码图片的id调用
可以将长长的base64代码放在文章的末尾，然后在文章中通过![avatar]调用他

![avatar][base64str]
[base64str]:data:image/png;base64,iVBORw0......

一个小脚本

base64编码在很多语言中都有封装好的方法实现，我写了个python小脚本，可以将一个目录下面的所有图片格式的文件base64编码后写入一个指定文件中。

# -*- coding: utf-8 -*- 
#~ #------------------------------------------------------------------
#~ module:base64 os re
#~ Filename:transfer.py 
#~ Description:transfer pacific file into base64 string and write into
#~ a text file with form of Markdown quote
#~ Function : 
#~ def get_filename(filepath):return files' name under filepath
#~ def name_fliter(file_name_list):remove files that are not image form
#~ def trans(file_name_list): base64encode image and write into txt
#~ Date: 2020-1-15 
#~ Author:Alexi Bi 
#~ Email:[e-mail] 
#~ #------------------------------------------------------------------
#~ #------------------------------------------------------------------



import base64
import os
import re

# return files' name under filepath
def get_filename(filepath):
    file_name_list=[]
    for root,dirs,files in os.walk(filepath):
        file_name_list+=files
    return file_name_list
    
# remove files that are not image form
def name_fliter(file_name_list):
    for words in file_name_list[::-1]:
        if not (re.match(r'.*((.jpg)|(.png)|(.jpeg)|(.psd)|(.bmp))$',words)):
            file_name_list.remove(words)
    
# write into a txt file 
def trans(file_name_list):
    if len(file_name_list)!=0:
        fs=open(text,'a+')
        for files in file_name_list:
            type=os.path.splitext(files)[1][1:]
            f=open(path+'\\'+files,'rb')
            ls_f=base64.b64encode(f.read())
            fs.write('['+files+']:data:image/'+type+';base64,'+ls_f.decode()+'\n')  
            f.close()
        fs.close()



print("这个小脚本可以将你选择的路径下的图片base64编码\n")
print("并且将编码以Markdown引用的格式写在一个文件里\n")
print("引用标签就是对应的文件名\n")
print("这样你就不用再配图床的负载啦\n")
path=input("请输入图片的目录(也可以直接开脚本改，说不定还方便一点)：")
#path=('D:\\？') 
file_name_list=get_filename(path)
text='result.txt'
text=input("请输入要写入的文件，如果为空则写在在当前目录下result.txt中。")
name_fliter(file_name_list)
trans(file_name_list)

后记

虽然这玩意对咱这样的小访问量低并发的博客其实根本没有什么实际的意义，但是可以让大家知道优化这种东西有多细节（强行提高意义，点赞。）