Vue实现剪切板图片压缩功能


Posted in Javascript onFebruary 04, 2020

监听剪切板粘贴事件,读取剪切板中的图片文件,转成base64通过img标签显示出来,此时可能会存在剪切板中图片过大,产生上传速度慢问题,接下来就跟大家分享下如何将base64图片进行压缩。先跟大家展示下最终实现的效果:

Vue实现剪切板图片压缩功能

实现思路

  • 监听剪切板粘贴事件
  • 从事件回调中获取clipboardData中的image对象声明一个变量接收该对象
  • 使用reader.readAsDataURL方法加载clipboardData中的image对象
  • 在reader.onload回调中获取图片base64码
  • 创建Image对象,赋值图片base64码至当前对象的src属性
  • 调用Image对象的onload函数,获取图片宽高等信息
  • 声明canvas画布宽高分别为当前图片宽高除以缩放比例的值
  • 使用drawImage方法绘制当前图片

实现过程

本篇文章主要讲解剪切板图片压缩的实现,效果图中如何将剪切板的图片插入可编辑div以及如何发送,请移步我的另一篇文章: Vue解析剪切板图片并实现发送功能

监听剪切板粘贴事件: 实现图片粘贴

const that = this;
  document.body.addEventListener('paste', function (event) {
    that.$fullScreenLoading.show("读取图片中");
    // 获取当前输入框内的文字
    const oldText = that.$refs.msgInputContainer.textContent;
    // 读取图片
    let items = event.clipboardData && event.clipboardData.items;
    let file = null;
    if (items && items.length) {
      // 检索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
    }
    // 预览图片
    const reader = new FileReader();
    reader.onload = function(event) {
      // 图片内容
      const imgContent = event.target.result;
      // 创建img标签
      let img = document.createElement('img');//创建一个img
      // 获取当前base64图片信息,计算当前图片宽高以及压缩比例
      let imgObj = new Image();
      let imgWidth = "";
      let imgHeight = "";
      let scale = 1;
      imgObj.src = imgContent;
      imgObj.onload = function() {
        // 计算img宽高
        if(this.width<400){
          imgWidth = this.width;
          imgHeight = this.height;
        }else{
          // 输入框图片显示缩小10倍
          imgWidth = this.width/10;
          imgHeight = this.height/10;
          // 图片宽度大于1920,图片压缩5倍
          if(this.width>1920){
            // 真实比例缩小5倍
            scale = 5;
          }
        }
        // 设置可编辑div中图片宽高
        img.width = imgWidth;
        img.height = imgHeight;
        // 压缩图片,渲染页面
        that.compressPic(imgContent,scale,function (newBlob,newBase) {
          // 删除可编辑div中的图片名称
          that.$refs.msgInputContainer.textContent = oldText;
          img.src = newBase; //设置链接
          // 图片渲染
          that.$refs.msgInputContainer.append(img);
          that.$fullScreenLoading.hide();
        });
      };
    };
    reader.readAsDataURL(file);
  });

实现base64图片压缩函数

// 参数: base64地址,压缩比例,回调函数(返回压缩后图片的blob和base64)
  compressPic:function(base64, scale, callback){
    const that = this;
    let _img = new Image();
    _img.src = base64;
    _img.onload = function() {
      let _canvas = document.createElement("canvas");
      let w = this.width / scale;
      let h = this.height / scale;
      _canvas.setAttribute("width", w);
      _canvas.setAttribute("height", h);
      _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
      let base64 = _canvas.toDataURL("image/jpeg");
      // 当canvas对象的原型中没有toBlob方法的时候,手动添加该方法
      if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
          value: function (callback, type, quality) {
            let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
              len = binStr.length,
              arr = new Uint8Array(len);
            for (let i = 0; i < len; i++) {
              arr[i] = binStr.charCodeAt(i);
            }
            callback(new Blob([arr], {type: type || 'image/png'}));
          }
        });
      }else{
        _canvas.toBlob(function(blob) {
          if(blob.size > 1024*1024){
            that.compressPic(base64, scale, callback);
          }else{
            callback(blob, base64);
          }
        }, "image/jpeg");
      }
    }
  }

上述代码github地址: chat-system

总结

以上所述是小编给大家介绍的Vue实现剪切板图片压缩功能,希望对大家有所帮助!

Javascript 相关文章推荐
js获取html文件的思路及示例
Sep 17 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
js实现简单数字变动效果
Nov 06 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
Vue中keep-alive组件作用详解
Feb 04 #Javascript
WEB前端性能优化的7大手段详解
Feb 04 #Javascript
JavaScript对象属性操作实例解析
Feb 04 #Javascript
JavaScript this使用方法图解
Feb 04 #Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 #Javascript
JavaScript原型继承和原型链原理详解
Feb 04 #Javascript
JavaScript单线程和任务队列原理解析
Feb 04 #Javascript
You might like
解析php开发中的中文编码问题
2013/08/08 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php链表用法实例分析
2015/07/09 PHP
php递归函数怎么用才有效
2018/02/24 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
JavaScript高级程序设计
2006/12/29 Javascript
javascript replace方法与正则表达式
2008/02/19 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
python复制文件代码实现
2013/12/23 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
eclipse创建python项目步骤详解
2019/05/10 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
程序员机试试题汇总
2012/03/07 面试题
企业门卫岗位职责
2013/12/12 职场文书
六十岁生日答谢词
2014/01/10 职场文书
医院工作检讨书范文
2014/02/10 职场文书
黄金酒广告词
2014/03/21 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
利用JavaScript写一个简单计算器
2021/11/27 Javascript