前端影像處理指南

動感小前端發表於2019-03-02
前端

計算機影像處理是一門很成熟的技術，任何一門可作業系統介面的語言都能很輕易的實現各種處理操作。但是前端限於瀏覽器環境和介面限制，處理起來會有諸多不便，這裡所說的前端影像處理，是真的指不借助任何後端服務純前端實現的影像處理。本文會介紹canvas點陣圖處理，SVG向量圖和CSS3影像處理，重點是canvas，並且最後會附上一個小應用。

canvas點陣圖處理

HTML5 canvas為我們提供了一塊畫布，讓前端也有了操作點陣圖的功能：圖片旋轉、縮放、濾鏡、壓縮等都可以通過JS來實現。

影像基本處理

通過設定drawImage引數可以實現圖片繪製、縮放、拉伸和裁剪等操作(注意canvas無法繪製體積過大圖片，否則會卡甚至崩掉，大圖可以分塊讀取繪製)：

圖片描述

詳細用法參考 drawImage()，DEMO原始碼戳這裡 JS Bin.

只需要drawImage一個方法，就可以實現基本圖形處理功能，再結合滑鼠或滾輪事件，就可以實現更復雜的區域性放大預覽，縮放等功能了。

影像濾鏡處理

現在的朋友圈發個圖都要用濾鏡美一下，復古清純膠片LOMO各種風格應有盡有。canvas提供了getImageData方法來獲取影像上每一個畫素點的RGBA資訊，這樣我們就能對圖片進行畫素級處理了。通過特定演算法來重寫imageData中的畫素資訊，然後用setImageData方法把新的資料重新繪製在canvas上，這樣就可以實現影像濾鏡打碼加特效等一系列功能。

比如我們現在要實現一個復古濾鏡:

// 復古濾鏡處理演算法：獲取每個畫素的RGB資訊，並按特定權重返回其加權平均值
let sepiaFilter = function(imgData) {
  let d = imgData.data
  for (let i = 0; i < d.length; i += 4) {
    let r = d[i]
    let g = d[i + 1]
    let b = d[i + 2]
    d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red
    d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green
    d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue
  }
  return imgData
}
//影像地址必須和當前頁面同域，否則會報cross-origin錯誤 
img.src = `/img/logo@2x.png` 
img.onload = () => {
  ctx.drawImage(img, 0, 0) // 繪製原圖
  let imgData = ctx.getImageData(0, 0, img.width, img.height) // 獲取圖片資訊
  ctx.putImageData(sepiaFilter(imgData), 100, 0) // 繪製處理後圖片
}

圖片描述

詳細用法參考 getImageData() 和 putImageData()，DEMO原始碼戳這裡 JSFiddle.

濾鏡處理關鍵在於濾鏡演算法，要想寫出更高階的特效需要有計算機圖形學基礎，對卷積矩陣、拉普拉斯變換、傅立葉變換等數學知識也要了解，這個坑很大我就不挖了。

影像base64儲存

加完特效後如果我們想把影像儲存下來，就可以用toDataURL方法來對圖片進行格式轉換、壓縮儲存了。

// 支援三種檔案型別：image/png(預設) | image/jpeg | image/webp(僅Chrome)
canvas.toDataURL() // 預設儲存為png
// 僅jpeg/webp支援質量引數(0~1,預設0.92)
canvas.toDataURL("image/jpeg", 0.1) // 儲存為質量為0.1的jpeg

由於儲存形式是base64編碼，原來圖片的每三個位元組都會被擴充套件成4位元組，所以整體上編碼後資料會比原來多約1/3。以下是通過toDataURL儲存後的圖片和原圖大小相關對比資料(資料僅供參考，不具通用性)：

圖片描述

可見儲存後圖片體積並不是原來的4/3，實際上處理後的圖片都會比原圖大好幾倍，並且不同的圖片增大的體積也是不確定的。如果是要上傳圖片到伺服器，可以把base64轉化成Blob二進位制資料壓縮上傳；如果要直接在前端顯示或供使用者下載，jpg還好可以設定質量引數，要是png就沒法壓縮了。

只是用toDataURL還不夠，使用者需要通過手動點選圖片-右鍵圖片儲存為來儲存圖片，如果要實現點選下載按鈕自動下載圖片還需要修改圖片型別為octet-stream，然後利用HTML5的download屬性強制讓瀏覽器下載。

詳細用法參考toDataURL(). 自動下載圖片DEMO原始碼快戳我 JSFiddle.

程式設計師的備胎

有了以上基礎，再結合成熟的圖形處理演算法，我們可以完成日常工作中大部分影像處理需求，以下列出了一些相關輪子可做備胎。備胎這種東西多多益善，萬一以後用到了呢？

注意：本人很專一。

html2canvas

將web頁面通過canvas來實現截圖，其原理就是遍歷DOM結構和樣式，然後在canvas中繪製出來，通過toDataURL輸出圖片。但由於canvas圖片的同源策略限制，如果圖片和網站不同源的話會擷取不出來的。另外在微信中測試時，即使用同源的圖片擷取出來的圖片也有問題，所以要想將其用於生產環境，還是得看場景，有很多坑要踩。

code-to-image

程式碼轉圖片工具。有時候你在不同的平臺寫文章貼程式碼，由於不同平臺程式碼格式化規範不一，所以經常會出現程式碼排版問題，通過這個工具將程式碼轉成圖片就可以避免排版問題了。

Cropper

一個專門用來做圖片裁剪的應用。

tracking.js

這是一個專業的計算機視覺處理JS庫，包含了大量圖形處理演算法，可用來做人臉識別，色彩追蹤等酷炫功能。

qrcode2

用JS動態生成二維碼，這個庫還是很實用的，原理就是qrcode演算法+canvas繪圖，不支援canvas的用table相容。

AlloyImage

騰訊出的基於HTML5的專業級影像處理開源引擎，功能很強大，簡直就是Web版的PS。

以上列舉部分，更多備胎在此： https://github.com/0326/canvas

SVG向量圖處理

講完點陣圖再說向量圖。向量圖在繪製圖示、商業LOGO、動畫元素上應用非常廣範。Web最開始支援的向量圖形並不是現在的SVG，而是微軟主推的VML，所以在低版本IE下面只支援VML而不支援SVG，直到後來SVG成為W3C標準並被普及，微軟才在IE9中支援SVG。

SVG遵循XML規範，可以很好的整合在HTML裡面，同時支援JS指令碼控制，還有基於SMIL標準的動態內容支援，做起動畫來也是非常方便。目前基於SVG的JS圖形庫輪子也是非常多，如svg.js, Snap.svg, Velocity.js, D3.js等等，目前暫無SVG應用需求，等用的時候再翻牌子吧。

CSS影像處理

如果你的影像特效只是用來給使用者展示，並不需要儲存的話，可以直接用CSS處理，基本的調整圖片大小、拉伸、旋轉、裁切等操作直接幾個CSS屬性width/height/skew/rotate/clip-path等就能搞定了。如果想加特效，使用CSS濾鏡Duang的一下就出來了，不需要任何圖形學基礎和數學知識：

詳細說明見 CSS filter – MDN, DEMO 原始碼見JS Bin.

總結

最後介紹個小工具TrimPNG。大家都知道TinyPNG可以壓縮PNG, TrimPNG顧名思義就是去除圖片空白和白邊的，實現了自動摳圖和切圖的功能（logo我是直接抄的TinyPNG，都是熊貓，應該不要緊吧


相關文章