vue+elementUI(el-upload)图片压缩,默认同比例压缩操作


Posted in Javascript onAugust 10, 2020

如下所示:

vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传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上传组件

<el-form-item ref="uploadElement" prop="picUrl" class="upload-img-form" label-width="0">
 <el-upload
 ref="uploadxls"
 class="avatar-uploader upload-img"
 :disabled="disabled"
 :auto-upload="false"
 :style="{height:'66px', backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center', backgroundSize: '100%,100%'}"
 action="aaa"
 ::limit="1"
 :show-file-list="false"
 :on-change="handlePictureCardPreview"
 :before-upload="beforeupload"
 accept="image/png,image/gif,image/jpg,image/jpeg"
 >
 <!--<img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">-->
 <i v-if="!dialogImageUrl" class="el-icon-plus avatar-uploader-icon" />
 <!--<i v-show="!dialogImageUrl" class="upload-icon" />
 <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传实景图</div>-->
 <div v-if="showDelete" class="remove-img"><i class="el-icon-delete" @click.stop="removeImg" /></div>
 <div slot="tip" class="el-upload__tip">
  <p><span style="color:#F5222D;">*</span>上传楼宇实景图</p>
  <p>支持:.jpg .png .gif格式 建议比例:16:9,小于10M</p>
 </div>
 </el-upload>
</el-form-item>

3、主要在handlePictureCardPreview方法里调用压缩方法

先在当前vue页面import公共js文件

import { compress } from '@/utils'

然后

// 图片预览
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')
 })
 }
}

compress传入file.raw作为fileObj

这样只要上传图片就进行图片压缩

补充知识:element upload限制上传图片尺寸、大小、比例

我就废话不多说了,大家还是直接看代码吧~

// 上传前判断
  public async beforeUpload(file: any) {
    const is1M = file.size / 1024 / 1024 < 3; // 限制小于3M
    if (!is1M) {
      this.$message.error('图片尺寸限制最小为270 x 270,大小不可超过3MB,比例为1:1');
      return false;
    } else {
      const isSize = new Promise((resolve, reject) => {
        const width = 270;
        const height = 270;
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.onload = () => {
          const valid = img.width >= width && img.height >= height && img.width === img.height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error('图片尺寸限制最小为270 x 270,大小不可超过3MB,比例为1:1');
          return Promise.reject();
        },
      );
      return isSize;
    }
  }

看了很多还不如自己撸一个

以上这篇vue+elementUI(el-upload)图片压缩,默认同比例压缩操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
javascript求日期差的方法
Mar 02 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 #Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 #Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 #Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 #Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 #Javascript
vue 实现锚点功能操作
Aug 10 #Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
Opacity.js
2007/01/22 Javascript
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
pandas中Timestamp类用法详解
2017/12/11 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python删除n行后的其他行方法
2019/01/28 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
Linux文件操作命令都有哪些
2016/07/23 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
2014最新实习证明模板
2014/10/02 职场文书
详解Redis复制原理
2021/06/04 Redis
Java tomcat手动配置servlet详解
2021/11/27 Java/Android