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 相关文章推荐
Jquery中删除元素的实现代码
Dec 29 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
JavaScript数组复制详解
Feb 02 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
React服务端渲染原理解析与实践
Mar 04 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 数组入门教程小结
2009/05/20 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
利用js对象弹出一个层
2008/03/26 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
python中的协程深入理解
2019/06/10 Python
Django分页功能的实现代码详解
2019/07/29 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
财务会计专业应届毕业生求职信
2013/10/18 职场文书
大学生村官工作感言
2014/01/10 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
公司股东出资证明书
2014/11/01 职场文书
小学音乐课教学反思
2016/02/18 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
一文读懂navicat for mysql基础知识
2021/05/31 MySQL