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

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

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

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

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

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

監(jiān)聽(tīng)剪切板粘貼事件: 實(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)建一個(gè)img
      // 獲取當(dāng)前base64圖片信息，計(jì)算當(dāng)前圖片寬高以及壓縮比例
      let imgObj = new Image();
      let imgWidth = "";
      let imgHeight = "";
      let scale = 1;
      imgObj.src = imgContent;
      imgObj.onload = function() {
        // 計(jì)算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;
        // 壓縮圖片，渲染頁(yè)面
        that.compressPic(imgContent,scale,function (newBlob,newBase) {
          // 刪除可編輯div中的圖片名稱(chēng)
          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元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

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

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

廣告

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