189 8069 5689
监听剪切板粘贴事件，读取剪切板中的图片文件，转成base64通过img标签显示出来，此时可能会存在剪切板中图片过大，产生上传速度慢问题，接下来就跟大家分享下如何将base64图片进行压缩。先跟大家展示下最终实现的效果：
创新互联是一家专业提供苍溪企业网站建设,专注与成都网站建设、网站制作、HTML5、小程序制作等业务。10年已为苍溪众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
实现思路
实现过程
本篇文章主要讲解剪切板图片压缩的实现，效果图中如何将剪切板的图片插入可编辑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);
});
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。