Vue使用mixins实现压缩图片代码


Posted in Javascript onMarch 14, 2018

本文介绍了Vue使用mixins实现压缩图片代码,分享给大家,具体如下:

图片压缩

创建mixins image-compress.js

export default {

 methods: {
  /**
   * 检查并压缩图片大小
   */
  checkAndHandleCompression(file) {

   return new Promise((resolve, reject) => {

    this.imgBase64(file, (image, canvas) => {
     let maxSize = 2 * 1024; // 2M (单位KB)
     let fileSize = file.size / 1024; // 图片大小 (单位KB)

     let uploadSrc, uploadFile;
     if (fileSize > maxSize) { // 如果图片大小大于maxSize,进行压缩
      uploadSrc = canvas.toDataURL(file.type, maxSize / fileSize);
      uploadFile = this.convertBase64UrlToFile(uploadSrc, file.name); // 转成file文件
     } else {
      uploadSrc = image.src;
      uploadFile = file;
     }

     let compressedSize = uploadFile.size / 1024;// 压缩后图片大小 (单位KB)
     // 判断图片大小是否小于maxSize,如果大于则继续压缩至小于为止
     if (compressedSize.toFixed(2) > maxSize) {
      this.checkAndHandleUpload(uploadFile);
     } else {
      let fileOptions = {uploadSrc, uploadFile};
      resolve(fileOptions);
     }
    });

   });

  },

  /**
   * 将图片转化为base64
   */
  imgBase64(file, callback) {
   // 看支持不支持FileReader
   if (!file || !window.FileReader) return;
   // 创建一个 Image 对象
   let image = new Image();
   // 绑定 load 事件处理器,加载完成后执行
   image.onload = function () {
    // 创建 canvas DOM 对象
    let canvas = document.createElement('canvas');
    // 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型
    let ctx = canvas.getContext('2d');
    // 如果高度超标 // 参数,最大高度
    let MAX_HEIGHT = 3000;
    if (image.height > MAX_HEIGHT) {
     // 宽度等比例缩放 *=
     image.width *= MAX_HEIGHT / image.height;
     image.height = MAX_HEIGHT;
    }
    // 获取 canvas的 2d 环境对象,
    // 可以理解Context是管理员,canvas是房子
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重置canvas宽高
    canvas.width = image.width;
    canvas.height = image.height;
    // 将图像绘制到canvas上
    ctx.drawImage(image, 0, 0, image.width, image.height);

    callback(image, canvas);

   };
   if (/^image/.test(file.type)) {
    // 创建一个reader
    let reader = new FileReader();
    // 将图片将转成 base64 格式
    reader.readAsDataURL(file);
    // 读取成功后的回调
    reader.onload = function () {
     // 设置src属性,浏览器会自动加载。
     // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
     image.src = this.result;
    };
   }
  },

  /**
   * 把Base64转换成file文件
   */
  convertBase64UrlToFile(dataurl, filename) {
   let arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length,
    u8arr = new Uint8Array(n);
   while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
   }
   return new File([u8arr], filename, {type: mime});
  }

 }
};

example

<template>
  ...
</template>
<script>
 import imageUploadMixins from '@/mixins/image-compress'; 
 export default { 
  mixins: [imageUploadMixins],  
  ...  
  methods:{
    handleUploadImage(e){
      let file = e.target.files[0];
      this.checkAndHandleCompression(file).then( fileOptions => {
        // let {uploadSrc, uploadFile} = fileOptions;
        
        // 压缩完成使用 uploadSrc, uploadFile
        
        ...
        
      });
    }
  }
   ...  
 }
</script>
<style>
  ...
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
vue2.0模拟锚点的实例
Mar 14 #Javascript
vue的mixins属性详解
Mar 14 #Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 #Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 #Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 #Javascript
create-react-app构建项目慢的解决方法
Mar 14 #Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 #Javascript
You might like
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
python3编码问题汇总
2016/09/06 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
如何让Java程序执行效率更高
2014/06/25 面试题
JSF的标签库有哪些
2012/04/27 面试题
俄罗斯商务邀请函
2014/01/26 职场文书
高中历史教学反思
2014/02/08 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
法律讲堂观后感
2015/06/11 职场文书
记者节感言
2015/08/03 职场文书
公司人事管理制度
2015/08/05 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python