中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue實現剪切板圖片壓縮功能

發布時間:2020-09-14 14:50:40 來源:腳本之家 閱讀:386 作者:神奇的程序員 欄目:web開發

監聽剪切板粘貼事件,讀取剪切板中的圖片文件,轉成base64通過img標簽顯示出來,此時可能會存在剪切板中圖片過大,產生上傳速度慢問題,接下來就跟大家分享下如何將base64圖片進行壓縮。先跟大家展示下最終實現的效果:

Vue實現剪切板圖片壓縮功能

實現思路

  • 監聽剪切板粘貼事件
  • 從事件回調中獲取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

總結

以上所述是小編給大家介紹的Vue實現剪切板圖片壓縮功能,希望對大家有所幫助!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

邵武市| 郎溪县| 榆树市| 壤塘县| 西昌市| 林甸县| 武安市| 平昌县| 常山县| 扎赉特旗| 攀枝花市| 文登市| 汾西县| 凤庆县| 呼和浩特市| 平果县| 廊坊市| 新余市| 色达县| 朝阳区| 娄烦县| 宁德市| 临沂市| 灌阳县| 富川| 霍林郭勒市| 七台河市| 吉水县| 铁岭县| 昔阳县| 汽车| 永仁县| 无棣县| 芜湖市| 澜沧| 九龙县| 辉南县| 姚安县| 湖口县| 晋宁县| 嘉义市|