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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
JavaScript中的函数式编程详解
Aug 22 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
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python用for循环求和的方法总结
2019/07/08 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python里面如何实现tuple和list的转换
2012/06/13 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
25岁生日感言
2014/01/13 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
先进典型事迹材料
2014/12/29 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
Python sklearn分类决策树方法详解
2022/09/23 Python