監(jiān)聽剪切板粘貼事件，讀取剪切板中的圖片文件，轉(zhuǎn)成base64通過img標(biāo)簽顯示出來，此時可能會存在剪切板中圖片過大，產(chǎn)生上傳速度慢問題，接下來就跟大家分享下如何將base64圖片進(jìn)行壓縮。先跟大家展示下最終實(shí)現(xiàn)的效果：

創(chuàng)新互聯(lián)是一家專業(yè)提供蒼溪企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站制作、HTML5、小程序制作等業(yè)務(wù)。10年已為蒼溪眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

實(shí)現(xiàn)思路

• 監(jiān)聽剪切板粘貼事件
• 從事件回調(diào)中獲取clipboardData中的image對象聲明一個變量接收該對象
• 使用reader.readAsDataURL方法加載clipboardData中的image對象
• 在reader.onload回調(diào)中獲取圖片base64碼
• 創(chuàng)建Image對象，賦值圖片base64碼至當(dāng)前對象的src屬性
• 調(diào)用Image對象的onload函數(shù)，獲取圖片寬高等信息
• 聲明canvas畫布寬高分別為當(dāng)前圖片寬高除以縮放比例的值
• 使用drawImage方法繪制當(dāng)前圖片

實(shí)現(xiàn)過程

本篇文章主要講解剪切板圖片壓縮的實(shí)現(xiàn)，效果圖中如何將剪切板的圖片插入可編輯div以及如何發(fā)送，請移步我的另一篇文章： Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能

監(jiān)聽剪切板粘貼事件: 實(shí)現(xiàn)圖片粘貼

const that = this;
  document.body.addEventListener('paste', function (event) {
    that.$fullScreenLoading.show("讀取圖片中");
    // 獲取當(dāng)前輸入框內(nèi)的文字
    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;
        }
      }
    }
    // 預(yù)覽圖片
    const reader = new FileReader();
    reader.onload = function(event) {
      // 圖片內(nèi)容
      const imgContent = event.target.result;
      // 創(chuàng)建img標(biāo)簽
      let img = document.createElement('img');//創(chuàng)建一個img
      // 獲取當(dāng)前base64圖片信息，計算當(dāng)前圖片寬高以及壓縮比例
      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){
            // 真實(shí)比例縮小5倍
            scale = 5;
          }
        }
        // 設(shè)置可編輯div中圖片寬高
        img.width = imgWidth;
        img.height = imgHeight;
        // 壓縮圖片，渲染頁面
        that.compressPic(imgContent,scale,function (newBlob,newBase) {
          // 刪除可編輯div中的圖片名稱
          that.$refs.msgInputContainer.textContent = oldText;
          img.src = newBase; //設(shè)置鏈接
          // 圖片渲染
          that.$refs.msgInputContainer.append(img);
          that.$fullScreenLoading.hide();
        });
      };
    };
    reader.readAsDataURL(file);
  });

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：Vue實(shí)現(xiàn)剪切板圖片壓縮功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://jinyejixie.com/article22/ccehcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、微信小程序、移動網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、用戶體驗(yàn)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)