callback回调使用 vue_Vue实现剪切板图片压缩
你的选择是做或不做,但不做就永远不会有机会。
前言
监听剪切板粘贴事件,读取剪切板中的图片文件,转成base64通过img标签显示出来,此时可能会存在剪切板中图片过大,产生上传速度慢问题,接下来就跟大家分享下如何将base64图片进行压缩。先跟大家展示下最终实现的效果:
实现思路
- 监听剪切板粘贴事件
- 从事件回调中获取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) {// 检索剪切板itemsfor (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
在线体验地址: chat-system
写在最后
公众号无法外链,如果文中有链接,可点击下方阅读原文查看?
callback回调使用 vue_Vue实现剪切板图片压缩相关推荐
- JavaFX 读取剪切板图片并保存图片到本地
JavaFX 读取剪切板图片并保存图片到本地 使用 JavaFX Clipboard API Clipboard clipboard = Clipboard.getSystemClipboard(); ...
- 浏览器 Web 访问剪切板图片
前言 有时候,我们希望能访问用户的剪切板,来实现一些方便用户的功能:但是另一方面,剪切板里的数据对用户来说又是非常隐私的,所以浏览器在获取信息方面有安全限制,同时也提供访问接口. 前段时间由于业务功能 ...
- 951_WSL中emacs在org-mode中插入windows剪切板图片
WSL中emacs在org-mode中插入windows中剪切板的图片 Grey WSL中emacs在org-mode中插入windows中剪切板的图片 功能诉求 我一直想打造一套可以一劳永逸的工具链 ...
- python获取剪切板图片_python 获取剪切板内容的两种方法
第一种 # -*- coding: utf-8 -*- # @Time : 2020/3/16 21:26 # @File : get_text_from_cupboard_13.py # @Auth ...
- callback回调使用 vue_Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸
1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property ...
- electron实现复制文字和图片到剪切板
electron实现复制文字和图片到剪切板 这是一个使用electron开发的客户端项目,其中想要实现一个模拟右键菜单复制的功能. 文字的复制 首先需要创建一个selection对象,该对象即为你左键 ...
- html5图片剪切板,JavaScript 网页端复制图片到剪切板
前端页面可能需要复制图片到剪切板的功能,这里使用JavaScript来实现这一功能,兼容大部分浏览器 全部代码 复制图片到剪切板 复制图片 var SelectText = function (ele ...
- js 复制图片到剪切板 和 js复制文本到剪切板
js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...
- vue复制图片到剪切板
vue复制图片到剪切板 最开始使用clipboard2,本地和测试环境都能运行,到了生产环境就无法粘贴到微信. 后来搜索到可以将图片转换成blod直接复制到剪切板,代码如下 <img :src= ...
- Windows 剪切板的应用——复制浏览器or本地目录图片
一.简述 最近看了windows的剪切板相关的应用代码,于是乎,便想将浏览器中复制的图片保存到本地,经过尝试,通过以下代码完成在浏览器中右键选择复制图片,然后监控键盘事件,当按下Ctrl + v 时保 ...
最新文章
- LeetCode简单题之二叉搜索树的范围和
- CF231C To Add or Not to Add(思维,模拟)
- 为什么我在gpu上训练模型但是gpu利用率为0且运行速度还是很慢?
- boost::math::relative_difference相关用法的测试程序
- 滴滴李先刚:语音识别在复杂场景的性能将显著提升
- 实战突击:PHP项目开发案例整合(第2版)
- Android adb不是内部或外部命令 问题解决
- (转)BCG出品史上最全Fintech-金融科技-发展趋势报告
- STL源码剖析 第5章 关联式容器
- Office 2010 文件验证
- entrez搜索SRA数据库info
- 机械键盘cherry常见轴科普 --By Cheng
- 【MDCC 2016】信息无障碍专题沙龙现场实录 | 附PPT下载
- 2021-04-17 ffmpeg视频合并报错;视频合并中间添加空白
- 功放DIY电路制作完成
- rsyslog+elk 网络设备日志收集及钉钉报警
- echarts年龄饼图_echarts饼图
- [附源码]Java计算机毕业设计SSM个人人际关系管理软件
- ps 2022 保存打开文件闪退解决方法
- 【深度学习】Pytorch chunk函数
热门文章
- 通过“”斐波那契数列“”学习函数递归
- IOS开发之页面跳转
- maya绝招(1-20)
- 蒙提霍尔问题(三门问题,概率论)C语言验证
- 排序算法专题-插入排序
- arcpy.SpatialJoin_analysis 空间连接分析
- Arcgis 如何将大量数据转换成csv导出
- Java之 final关键字
- Boost.Python.ArgumentError: Python argument types in错误解决及Boost安装配置
- Android View layout方法的简单使用案例