你的选择是做或不做，但不做就永远不会有机会。

前言

监听剪切板粘贴事件，读取剪切板中的图片文件，转成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) {            // 检索剪切板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);    });

       // 参数: 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:

作者：神奇的程序员K

转发链接：