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 相关文章推荐
JS之小练习代码
Oct 12 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
Vue3.0的优化总结
Oct 16 Javascript
5个实用的JavaScript新特性
Jun 16 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python reverse反转部分数组的实例
2018/12/13 Python
python实现翻译word表格小程序
2020/02/27 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
大学生活学习的自我评价
2013/12/03 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
《春雨》教学反思
2014/04/24 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
赔偿协议书范本
2014/09/12 职场文书
卖房协议书样本
2014/10/30 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
python 破解加密zip文件的密码
2021/04/22 Python
Pytest中skip skipif跳过用例详解
2021/06/30 Python