为了降低资源服务器的消耗、有些时候需要前端压缩图片,转码等一些处理。
一、Base64的优点和缺点
图片转换成base64格式的优缺点
1. 优点
(1)base64格式的图片是文本格式,占用内存小,转换后的大小比例大概为1/3,降低了资源服务器的消耗;
(2)网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访问次数。
(3)base64编码的字符串,更适合不同平台、不同语言的传输;
(4)算法是编码, 不是压缩, 编码后只会增加字节数,但是算法简单, 几乎不会影响效率,算法可逆, 解码很方便, 不用于私密信息通信;
(5)解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容;
2. 缺点
(1)base64格式的文本内容较多,存储在数据库中增大了数据库服务器的压力;
(2)网页加载图片虽然不用访问服务器了,但因为base64格式的内容太多,所以加载网页的速度会降低,可能会影响用户的体验。
(3)base64无法缓存,要缓存只能缓存包含base64的文件,比如js或者css,这比直接缓存图片要差很多,而且一般HTML改动比较频繁,所以等同于得不到缓存效益。
// 获取图片转base64
getBase64(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function() {
imgResult = reader.result
}
reader.onerror = function(error) {
reject(error)
}
reader.onloadend = function() {
resolve(imgResult)
}
})
}
二、压缩图片的大小——image-conversion
image-conversion除了压缩图片体积,还可以压缩图片宽高比例等,具体参数使用可自行百度
1.安装模块
npm i image-conversion --save
2.引入imageConversion的compressAccurately ,进行压缩
// 引入image-conversion
import { compressAccurately } from 'image-conversion'
3.调用compressAccurately
// 压缩到100KB,这里的100就是要压缩的大小,可自定义
compressAccurately(file, 100).then(res => {
var mfile = res
// console.log('压缩好的文件',mfile)
// console.log('压缩上传的图片大小',mfile.size)
//Blob转成File
let files1 = new window.File(
[mfile], //[文件]
file.name,
{ type: file.type }
)
})
4、其中压缩好的文件默认是Blob类型
//利用File Api将blob转成File对象
let files = new window.File([this.blob], file.name, {type: file.type})
最新评论