canvas實現的前端壓縮裁剪工具

crazyMary發表於2018-03-07
Canvas前端

最近專案中應用到canvas，見識到了canvas技術的強大，突然想到之前用過的開源的裁減庫，大多數都是劃出一個裁剪框，將座標點和長寬傳到服務端，由後臺做裁剪，正好有空，做了個基於canvas的純前端裁剪壓縮工具，支援pc和移動端平臺。

實現原理

  1. 使用原生的URL api 讀取本地選取的圖片檔案（原始檔）；
  2. 使用canvas的繪圖功能（drawImage）將源圖片繪製到畫板上，兩種繪製策略：'CONTAIN'模式等比壓縮居中顯示；'COVER'模式選取長寬比相對外部container較小的一端適配。類似於background-size屬性的cover和contain；
  3. 使用滑鼠事件使背景畫板可移動；
  4. 根據裁剪框大小配置在畫板中心繪製裁剪框，使其可resize；
  5. 當畫板移動或resize裁剪框時，動態繪製對應的裁剪區域；
  6. 根據質量引數，對裁剪區域使用toDataURL方法壓縮裁剪，拿到裁剪圖的base64格式，對base64進行blob化處理，最終可輸出base64、blob和arrayBuffer格式的裁剪結果。

使用說明

對外暴露clip方法，返回一個裁剪物件。

const c = clip({
      container, //原始檔的外包包裹框--dom
      sourceFile, //原始檔--file
      outPutOpt //輸出圖片的型別和壓縮質量引數--object
      showType //畫板顯示模式--COVER CONTAIN(預設)
    })
// c.clip64:base64結果
// c.clipBlob:blob結果
// c.clipArrayBuffer:arrayBuffer結果
複製程式碼

github地址

pc demo地址

mobile demo地址

結語

因為時間關係，採用es6編碼，沒有做很多的相容性考慮，可能存在一些體驗問題。

後期有空了再改進，歡迎指正。

相關文章