什么是base64:
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。
图片转换成base64格式的优缺点
优点
- base64格式的图片是文本格式,占用内存小,转换后的大小比例大概为1/3,降低了资源服务器的消耗;
- 网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访问次数。
- base64编码的字符串,更适合不同平台、不同语言的传输;
- 算法是编码, 不是压缩, 编码后只会增加字节数,但是算法简单, 几乎不会影响效率,算法可逆, 解码很方便, 不用于私密信息通信;
- 解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容; 缺点
- base64格式的文本内容较多,存储在数据库中增大了数据库服务器的压力;
- 网页加载图片虽然不用访问服务器了,但因为base64格式的内容太多,所以加载网页的速度会降低,可能会影响用户的体验。
- base64无法缓存,要缓存只能缓存包含base64的文件,比如js或者css,这比直接缓存图片要差很多,而且一般HTML改动比较频繁,所以等同于得不到缓存效益。
javascript如何将图片绝对地址转化为base64
function getBase64Image(url) {
const img = new Image()
//因为是网络资源所以会有图片跨域问题产生,此属性可以解决跨域问题,下文详解
img.setAttribute("crossOrigin", 'anonymous');
//如果需要兼容ios,这两个顺序一定不能换,先设置crossOrigin后设置src
img.src = url;
return new Promise((resolve, reject) => {
img.onload = () => {
//canvas基本配置
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
resolve({
success: true,
//canvas.toDataURL的方法将图片的绝对路径转换为base64编码
base64: canvas.toDataURL()
})
}
img.onerror = () => {
reject({ success: false })
}
})
}
//调用
getBase64Image('https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46')
.then(res=>{
console.log(res) // {success : true, base64 :'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4A…etGgbgs19tVBD5K/+l/8/4jpK+RseVK4AAAAASUVORK5CYII='}
})
crossOrigin属性
如果你有一个跨源图像,你可以将它复制到画布上,但这“污点”的画布,阻止你阅读它(所以你不能“偷”图像,例如从内部网站的网站本身没有访问)。但是,通过使用CORS,存储图像的服务器可以告诉浏览器允许跨源访问,因此您可以通过画布访问图像数据。
这个属性有两个值可选:
anonymous
:如果使用这个值的话就会在请求中的header中的带上Origin属性,但请求不会带上cookie和其他的一些认证信息。
use-credentials
:这个就同时会在跨域请求中带上cookie和其他的一些认证信息。
如果只写个空crossOrigin=''
,则和anonymous
效果一样
结尾
我们项目在使用webpack打包时可以根据实际情况来选择性的将图片转换成base64,webpack需要用到的url-loader
和file-loader
,前者是依赖后者去做事,所以需要安装,但是不需要特殊配置那么就可以这样写
module : {
rules : [
{
//正则匹配后缀为.jpg、png、gif、jpeg格式的图片
test: /\.(jpg|png|gif|jpeg)$/,
//需要用到url-loader
loader: 'url-loader',
options: {
//这里就是配置,在50K以下就转base64,不设置是默认全部转成base64
limit: 50 * 1024,
//这个配置就是如果没有转换base64会打包成图片名称是唯一的hash值,但是hash值太长,就可以设置文件名的长度,这里的10就是取hash值的前10位,ext的意思就是保留原来的后缀名
name: '[hash:10].[ext]',
//url-loader默认是按照es6模式,这里就是取消es6,使用commonJs模式,
esModule : false,
}
},
]
}