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图片压缩(不失真)

转载于:https://www.cnblogs.com/shifeng-/p/10448960.html