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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。