js版

1. 新建compressImage.js，内容如下：

// 将base64转换为blob（有需要可加上，没需要可不加）

function convertBase64UrlToBlob(urlData) {

  var arr = urlData.split(',')

  var mime = arr[0].match(/:(.*?);/)[1]

  var bstr = atob(arr[1])

  var n = bstr.length

  var u8arr = new Uint8Array(n)

  while (n--) {

    u8arr[n] = bstr.charCodeAt(n)

  }

  return new Blob([u8arr], { type: mime })

}

// 压缩图片

function compressImage(path, config, callback) {

  var img = new Image()

  img.src = path

  img.onload = function() {

    var that = this

    var w = that.width

    var h = that.height

    var scale = w / h

    w = config.width || (config.height * scale)

    h = config.height || (config.width / scale)

    var quality = 0.7 // 默认图片质量为0.7

    // 生成canvas

    var canvas = document.createElement('canvas')

    var ctx = canvas.getContext('2d')

    // 创建属性节点

    var anw = document.createAttribute("width")

    anw.nodeValue = w

    var anh = document.createAttribute("height")

    anh.nodeValue = h

    canvas.setAttributeNode(anw)

    canvas.setAttributeNode(anh)

    ctx.drawImage(that, 0, 0, w, h)

    if (config.quality && config.quality <= 1 && config.quality > 0) {

      quality = config.quality

    }

    var base64 = canvas.toDataURL('image/*', quality)

    // 回调函数返回blob的值（若不需要，可直接返回base64的值）

    callback(convertBase64UrlToBlob(base64))

  }

}

1. 在html文件中引入

<script src="./compressImage.js"></script> // 具体路径按自己存放的位置而定

1. 使用：

compressImage(图片路径, {

  width: 100, // 压缩后图片的宽

  height: 200, // 压缩后图片的高，宽高若只传一个，则按图片原比例进行压缩

  quality: 0.8 // 压缩后图片的清晰度，取值0-1，不传默认为0.7，值越小，所绘制出的图像越模糊

}, function(result){

  console.log(result) // result即为压缩后的结果

})

vue版

1. 新建compressImage.js，内容如下：

// 将base64转换为blob

export function convertBase64UrlToBlob(urlData) {

  var arr = urlData.split(',')

  var mime = arr[0].match(/:(.*?);/)[1]

  var bstr = atob(arr[1])

  var n = bstr.length

  var u8arr = new Uint8Array(n)

  while (n--) {

    u8arr[n] = bstr.charCodeAt(n)

  }

  return new Blob([u8arr], { type: mime })

}

// 压缩图片

export function compressImage(path, config) {

  return new Promise((resolve, reject) => {

    var img = new Image()

    img.src = path

    img.onload = function() {

      var that = this

      var w = that.width

      var h = that.height

      var scale = w / h

      w = config.width || config.height * scale

      h = config.height || config.width / scale

      var quality = 0.7 // 默认图片质量为0.7

      // 生成canvas

      var canvas = document.createElement('canvas')

      var ctx = canvas.getContext('2d')

      // 创建属性节点

      var anw = document.createAttribute('width')

      anw.nodeValue = w

      var anh = document.createAttribute('height')

      anh.nodeValue = h

      canvas.setAttributeNode(anw)

      canvas.setAttributeNode(anh)

      ctx.drawImage(that, 0, 0, w, h)

      if (config.quality && config.quality <= 1 && config.quality > 0) {

        quality = config.quality

      }

      var base64 = canvas.toDataURL('image/*', quality)

      // var blob = convertBase64UrlToBlob(base64)

      // 回调函数返回base64的值，也可根据自己的需求返回blob的值

      resolve(base64)

    }

  })

}

1. 在vue文件中引入

import { compressImage } from './compressImage' // 具体路径按自己存放的位置而定

1. 使用：

compressImage(图片路径, {

  width: 100, // 压缩后图片的宽

  height: 200, // 压缩后图片的高，宽高若只传一个，则按图片原比例进行压缩

  quality: 0.8 // 压缩后图片的清晰度，取值0-1，不传默认为0.7，值越小，所绘制出的图像越模糊

}).then(result => {

  console.log(result) // result即为压缩后的结果

})

关于图片压缩后失真的修复可查看 vue图片压缩(不失真)