您好,登錄后才能下訂單哦!
監聽剪切板粘貼事件,讀取剪切板中的圖片文件,轉成base64通過img標簽顯示出來,此時可能會存在剪切板中圖片過大,產生上傳速度慢問題,接下來就跟大家分享下如何將base64圖片進行壓縮。先跟大家展示下最終實現的效果:
實現思路
實現過程
本篇文章主要講解剪切板圖片壓縮的實現,效果圖中如何將剪切板的圖片插入可編輯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
總結
以上所述是小編給大家介紹的Vue實現剪切板圖片壓縮功能,希望對大家有所幫助!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。