websocket聊天時，圖片壓縮處理（url或者input-file）

業務背景：私信聊天，需要發送圖片，但是圖片過大需要壓縮處理。此時只有圖片url，可以使用以下方法：canvasDataURL(url, 目標圖片寬度,圖片要顯示區域的父元素)

注：該文件包含了input-file上傳圖片的情況（調用photoCompress）

// 壓縮圖片
export default {
  methods:{
    // 只有blob或者file形式的數據的情況直接調用此方法
    // file:文件，w：目標寬度，objDiv：壓縮后要放置的目標容器
    photoCompress(file, w, objDiv){
      var ready = new FileReader()  // 異步文件讀取機制
      ready.readAsDataURL(file) // 圖片預覽
      ready.onload = function(){
        var re = this.result
        this.canvasDataURL(re, w, objDiv)
      }
    },
    // 只有圖片url的情況直接調用此方法，re為url地址
    canvasDataURL(re, w, objDiv){
      var newImg = new Image()
      newImg.src = re
      var imgWidth,
        imgHeight,
        offsetX = 0,
        offsetY = 0
        // img的onload事件中同步執行繪制圖像的函數，就可以一邊裝載一邊繪制了
      newImg.onload = function(){
        var img = document.createElement("img")
        img.src = newImg.src
        imgWidth = img.width
        imgHeight = img.height
        var newHeight = Math.round(imgHeight * w / imgWidth) // 按比例計算壓縮后的圖片高度
        var canvas = document.createElement("canvas")
        canvas.width = w
        canvas.height = newHeight
        var ctx = canvas.getContext('2d')
        // clearRect(x,y,width,height)
        // 參數說明：x、y矩形起點的橫縱坐標，width、height表示矩形寬高
        ctx.clearRect(0,0,w,newHeight)
        // 重置圖片寬高為壓縮后的寬高
        imgWidth = w
        imgHeight = newHeight
        // drawImage(image,x,y,w,h)
        // 參數說明：image-Image對象，x、y是繪制時該圖像在畫布中的起始坐標。w、h表示繪制時圖像的寬高
        // 該方法也可以復制圖片某個區域：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
        // 參數說明：image-Image對象，sx、sy是復制源圖像中被復制區域的起點橫縱坐標，sw、sh時候被復制區域的寬高
        // dx、dy是表示復制后的目標圖像在畫布中的起始橫縱坐標，dw，dh是復制后的目標圖像的寬高
        ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight)
        
        // var base64 = canvas.toDataURL('img/png',0.7) // 參數表示：指定的圖片類型，圖片質量 
        // if(typeof objDiv === 'object'){
            objDiv.appendChild(canvas)
            // console.log(base64)
        // } else if(typeof objDiv === 'function'){
        //     objDiv(base64)
        // }
      }
    }
  }
}

 

如有問題，請您指出~