js/vue图片压缩

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

2. 在html文件中引入

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

3. 使用：

compressImage(图片路径, {
   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)
    }
  })
}

2. 在vue文件中引入

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

3. 使用：

compressImage(图片路径, {
   100, // 压缩后图片的宽
  height: 200, // 压缩后图片的高，宽高若只传一个，则按图片原比例进行压缩
  quality: 0.8 // 压缩后图片的清晰度，取值0-1，不传默认为0.7，值越小，所绘制出的图像越模糊
}).then(result => {
  console.log(result) // result即为压缩后的结果
})

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