监听剪切板粘贴事件,读取剪切板中的图片文件,转成base64通过img标签显示出来,此时可能会存在剪切板中图片过大,产生上传速度慢问题,接下来就跟大家分享下如何将base64图片进行压缩。先跟大家展示下最终实现的效果:
<李>监听剪切板粘贴事件
<李>从事件回调中获取clipboardData中图像的对象声明一个变量接收该对象李
<李>使用reader.readAsDataURL方法加载clipboardData中图像的对象李
<李>在reader.onload回调中获取图片base64码李
<李>创建形象对象,赋值图片base64码至当前对象的src属性李
<李>调用图像对象的onload函数,获取图片宽高等信息李
<李>声明帆布画布宽高分别为当前图片宽高除以缩放比例的值
<李>使用drawImage方法绘制当前图片
本篇文章主要讲解剪切板图片压缩的实现,效果图中如何将剪切板的图片插入可编辑div以及如何发送,请移步我的另一篇文章:Vue解析剪切板图片并实现发送功能
监听剪切板粘贴事件:实现图片粘贴
=这个常量;
document.body。addEventListener(“粘贴”,函数(事件){
fullScreenLoading.show美元。(“读取图片中”);//获取当前输入框内的文字
const的年代=,refs.msgInputContainer.textContent美元;//读取图片
让项目=事件。clipboardData,,event.clipboardData.items;
让文件=零;
如果物品,,items.length) {//检索剪切板项目
(让我=0;我& lt;items.length;我+ +){
如果项目[我].type.indexOf('图像')!==1){
文件=项目[我].getAsFile ();
打破;
}
}
}//预览图片
const读者=new FileReader ();
读者。onload=函数(事件){//图片内容
const imgContent=event.target.result;//创建img标签
让img=document.createElement (img);//创建一个img//获取当前base64图片信息,计算当前图片宽高以及压缩比例
让imgObj=新形象();
让imgWidth=" ";
让imgHeight=" ";
让规模=1;
imgObj。src=https://www.yisu.com/zixun/imgContent;
imgObj。onload=function () {//计算img宽高
如果(上<400){
imgWidth=上;
imgHeight=this.height;
其他}{//输入框图片显示缩小10倍
imgWidth=上/10;
imgHeight=this.height/10;//图片宽度大,于1920年图片压缩5倍
如果(上> 1920){//真实比例缩小5倍
规模=5;
}
}//设置可编辑div中图片宽高
img。宽度=imgWidth;
img。身高=imgHeight;//压缩图片,渲染页面
that.compressPic (imgContent、规模、功能(newBlob newBase) {//删除可编辑div中的图片名称
refs.msgInputContainer美元。textContent=的年代;
img。src=newBase;//设置链接//图片渲染
美元。refs.msgInputContainer.append (img);
美元。fullScreenLoading.hide ();
});
}；
}；
reader.readAsDataURL(文件);
});
之前
实现base64图片压缩函数
//参数:base64地址,压缩比例,回调函数(返回压缩后图片的blob和base64)
compressPic:函数(base64,规模、调){=这个常量;
让_img=新形象();
_img。src=https://www.yisu.com/zixun/base64;
_img。onload=function () {
让_canvas=document.createElement(“画布”);
让w=？?规模;
让h=８叨?规模;
_canvas。setAttribute(“宽度”,w);
_canvas。setAttribute(“高度”,h);
_canvas.getContext (2 d)。drawImage (0, 0, w h);
让base64=_canvas.toDataURL(“图像/jpeg”);//当画布对象的原型中没有toBlob方法的时候,手动添加该方法
如果(! HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty (HTMLCanvasElement.prototype toBlob, {
价值:函数(回调、类型、质量){
让binStr=atob(这一点。toDataURL(类型、质量).split (" ") [1]),
len=binStr.length,
arr=新Uint8Array (len);
(让我=0;我& lt;兰;我+ +){
arr[我]=binStr.charCodeAt(我);
}
回调(新团((arr),{类型:类型| |“图像/png”}));
}
});
其他}{
_canvas.toBlob(函数(blob) {
如果(blob)。大小比;1024 * 1024){
that.compressPic (base64,规模、调);
其他}{
回调(blob、base64);
}
},“图像/jpeg”);
}
}
}
上述代码github地址:聊天系统
