vue+elementUI图片压缩默认同比例压缩操作代码示例

本篇文章小编给大家分享一下vue+elementUI图片压缩默认同比例压缩操作代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

如下所示：

这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况，我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储，结合elementUI的el-upload组件实现图片上传功能（简单来说就是用户是老大）

1、提取出压缩方法，放在公共方法.js文件里

/** 图片压缩，默认同比例压缩
 * @param {Object} fileObj
 * 图片对象
 * 回调函数有一个参数，base64的字符串数据
 */
export function compress(fileObj, callback) {
 try {
 const image = new Image()
 image.src = URL.createObjectURL(fileObj)
 image.onload = function() {
  const that = this
  // 默认按比例压缩
  let w = that.width
  let h = that.height
  const scale = w / h
  w = fileObj.width || w
  h = fileObj.height || (w / scale)
  let quality = 0.7 // 默认图片质量为0.7
  // 生成canvas
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  // 创建属性节点
  const anw = document.createAttribute('width')
  anw.nodeValue = w
  const anh = document.createAttribute('height')
  anh.nodeValue = h
  canvas.setAttributeNode(anw)
  canvas.setAttributeNode(anh)
  ctx.drawImage(that, 0, 0, w, h)
  // 图像质量
  if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {
  quality = fileObj.quality
  }
  // quality值越小，所绘制出的图像越模糊
  const data = canvas.toDataURL('image/jpeg', quality)
  // 压缩完成执行回调
  const newFile = convertBase64UrlToBlob(data)
  callback(newFile)
 }
 } catch (e) {
 console.log('压缩失败!')
 }
}
function convertBase64UrlToBlob(urlData) {
 const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
 // 处理异常,将ascii码小于0的转换为大于0
 const ab = new ArrayBuffer(bytes.length)
 const ia = new Uint8Array(ab)
 for (let i = 0; i < bytes.length; i++) {
 ia[i] = bytes.charCodeAt(i)
 }
 return new Blob([ab], { type: 'image/png' })
}

2、el-upload上传组件

 
 
 
 
 

 

  
*上传楼宇实景图
  
支持：.jpg .png .gif格式 建议比例：16:9，小于10M
 
 

// 图片预览
handlePictureCardPreview(file) {
 const _that = this
 const isLt10M = file.size / 1024 / 1024 < 10
 if (!isLt10M) {
 this.$message.error('上传图片大小不能超过 10M!')
 return false
 } else {
 this.dialogImageUrl = URL.createObjectURL(file.raw)
 compress(file.raw, function(val) {
  _that.theForm.picUrl = val
  _that.imgFile = val
  _that.showDelete = true
  _that.$refs['addBuildingForm'].validateField('picUrl')
 })
 }
}