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 相关文章推荐
JavaScript的document对象和window对象详解
Dec 30 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
RequireJs的使用详解
Feb 19 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JavaScript实现256色转灰度图
2017/02/22 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
python图像处理入门(一)
2019/04/04 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
python try...finally...的实现方法
2020/11/25 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
P/Invoke是什么
2015/07/31 面试题
美术教师自我鉴定
2014/02/12 职场文书
大学军训感言300字
2014/03/09 职场文书
购房协议书范本
2014/04/11 职场文书
部队2015年终工作总结
2015/04/02 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
高老头读书笔记
2015/06/30 职场文书
培训班开班主持词
2015/07/02 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书