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圖片壓縮(不失真)