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))
  }
}
  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即为压缩后的结果
})

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

上一篇:Project Settings之Quality翻译


下一篇:业务方向和需求管理的流程