Vue實現剪切板圖片壓縮✍

你的選擇是作或不作，但不作就永遠不會有機會。

前言

監聽剪切板粘貼事件，讀取剪切板中的圖片文件，轉成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圖片壓縮函數

// 參數: 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地址：chat-system

在線體驗地址: chat-system

寫在最後

• 文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊和關注😊
• 本文首發於掘金，未經許可禁止轉載💌