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(圖片路徑, {
  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)
    }
  })
}

2. 在vue文件中引入

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

3. 使用：

compressImage(圖片路徑, {
  width: 100, // 壓縮后圖片的寬
  height: 200, // 壓縮后圖片的高，寬高若只傳一個，則按圖片原比例進行壓縮
  quality: 0.8 // 壓縮后圖片的清晰度，取值0-1，不傳默認為0.7，值越小，所繪制出的圖像越模糊
}).then(result => {
  console.log(result) // result即為壓縮后的結果
})

關於圖片壓縮后失真的修復可查看 vue圖片壓縮(不失真)