elementUI压缩图片和将图片转成base64格式

为了降低资源服务器的消耗、有些时候需要前端压缩图片,转码等一些处理。

一、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})

发表评论

电子邮件地址不会被公开。 必填项已用*标注