图片压缩——封装工具类(亲测一定有效)

创建compressImage.js

/** *** 压缩图片
 * * 注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。
 */
export function compressImage (file, config) {
     
  let fileName = file.name
  const read = new FileReader()
  read.readAsDataURL(file)
  return new Promise(function (resolve, reject) {
     
    read.onload = function (e) {
     
      let img = new Image()
      img.src = e.target.result
      img.onload = function () {
     
        // 默认按比例压缩
        let w = config.width
        let h = config.height
        // 生成canvas
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        let base64
        // 创建属性节点
        canvas.setAttribute('width', w)
        canvas.setAttribute('height', h)
        ctx.drawImage(this, 0, 0, w, h)

        base64 = canvas.toDataURL(file['type'], config.quality)

        /** 回调函数返回file的值（将base64编码转成file）**/
        // files = dataURLtoFile(base64) // 如果后台接收类型为base64的话这一步可以省略

        // 回调函数返回file的值（将base64转为二进制）
        let fileBinary = dataURLtoFile(base64, fileName)
        resolve(fileBinary)
      }
    }
  })
};
/**
 * 将base64转为二进制(blob) ***/
// eslint-disable-next-line no-unused-vars
function dataURLtoBlob (dataurl) {
     
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
     
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], {
      type: mime })
}

/** 将base64编码转回file文件 **/
// eslint-disable-next-line no-unused-vars
function dataURLtoFile (dataurl, fileName) {
     
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
     
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], fileName, {
      type: mime })
}

在要压缩图片的demo.vue里导入

<template>
<div>
 <input @change="getImgUrl($event)" ref="file" title='' type="file" accept="image/jpg,image/png,image/PNG,image/JPG" class="hiddenInput"/>
</div>
</template>
<script>
  import {
      compressImage } from '../utils/compressImage'
  export default {
     
    name: 'personal',
    data () {
     
    logoUrl:''
    },
    methods: {
     
     getImgUrl: function (e) {
     
        this.logoUrl = e.target.files[0]
        console.log(this.logoUrl) // 压缩之前的文件
         let config = {
     
              width: 100, // 压缩后图片的宽
              height: 100, // 压缩后图片的高
              quality: 1 // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
            }
            compressImage(e.target.files[0], config)
              .then(result => {
      // result 为压缩后二进制文件
                console.log(result)  // 压缩之后的文件
                })
        }
    }
    }
</script>