Vue实现剪切板图片压缩功能
监听剪切板粘贴事件,读取剪切板中的图片文件,转成base64通过img标签显示出来,此时可能会存在剪切板中图片过大,产生上传速度慢问题,接下来就跟大家分享下如何将base64图片进行压缩。先跟大家展示下最终实现的效果:
实现思路
- 监听剪切板粘贴事件
- 从事件回调中获取clipboardData中的image对象声明一个变量接收该对象
- 使用reader.readAsDataURL方法加载clipboardData中的image对象
- 在reader.onload回调中获取图片base64码
- 创建Image对象,赋值图片base64码至当前对象的src属性
- 调用Image对象的onload函数,获取图片宽高等信息
- 声明canvas画布宽高分别为当前图片宽高除以缩放比例的值
- 使用drawImage方法绘制当前图片
实现过程
本篇文章主要讲解剪切板图片压缩的实现,效果图中如何将剪切板的图片插入可编辑div以及如何发送,请移步我的另一篇文章:Vue解析剪切板图片并实现发送功能
监听剪切板粘贴事件:实现图片粘贴
constthat=this; document.body.addEventListener('paste',function(event){ that.$fullScreenLoading.show("读取图片中"); //获取当前输入框内的文字 constoldText=that.$refs.msgInputContainer.textContent; //读取图片 letitems=event.clipboardData&&event.clipboardData.items; letfile=null; if(items&&items.length){ //检索剪切板items for(leti=0;i1920){ //真实比例缩小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){ constthat=this; let_img=newImage(); _img.src=base64; _img.onload=function(){ let_canvas=document.createElement("canvas"); letw=this.width/scale; leth=this.height/scale; _canvas.setAttribute("width",w); _canvas.setAttribute("height",h); _canvas.getContext("2d").drawImage(this,0,0,w,h); letbase64=_canvas.toDataURL("image/jpeg"); //当canvas对象的原型中没有toBlob方法的时候,手动添加该方法 if(!HTMLCanvasElement.prototype.toBlob){ Object.defineProperty(HTMLCanvasElement.prototype,'toBlob',{ value:function(callback,type,quality){ letbinStr=atob(this.toDataURL(type,quality).split(',')[1]), len=binStr.length, arr=newUint8Array(len); for(leti=0;i1024*1024){ that.compressPic(base64,scale,callback); }else{ callback(blob,base64); } },"image/jpeg"); } } }
上述代码github地址:chat-system
总结
以上所述是小编给大家介绍的Vue实现剪切板图片压缩功能,希望对大家有所帮助!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。