html5 canvas為我們提供了一塊畫布，讓前端也有了操作位圖的功能：圖檔旋轉、縮放、濾鏡、壓縮等都可以通過js來實作。
通過設定drawimage參數可以實作圖檔繪制、縮放、拉伸和裁剪等操作(<code>注意canvas無法繪制體積過大圖檔，否則會卡甚至崩掉，大圖可以分塊讀取繪制</code>)：
圖檔描述
隻需要drawimage一個方法，就可以實作基本圖形處理功能，再結合滑鼠或滾輪事件，就可以實作更複雜的局部放大預覽，縮放等功能了。
現在的朋友圈發個圖都要用濾鏡美一下，複古清純膠片lomo各種風格應有盡有。canvas提供了getimagedata方法來擷取圖像上每一個像素點的rgba資訊，這樣我們就能對圖檔進行像素級處理了。通過特定算法來重寫imagedata中的像素資訊，然後用setimagedata方法把新的資料重新繪制在canvas上，這樣就可以實作圖像濾鏡打碼加特效等一系列功能。
比如我們現在要實作一個複古濾鏡:
濾鏡處理關鍵在于濾鏡算法，要想寫出更進階的特效需要有計算機圖形學基礎，對卷積矩陣、拉普拉斯變換、傅裡葉變換等數學知識也要了解，這個坑很大我就不挖了。
加完特效後如果我們想把圖像儲存下來，就可以用todataurl方法來對圖檔進行格式轉換、壓縮存儲了。
由于存儲形式是base64編碼，原來圖檔的每三個位元組都會被擴充成4位元組，是以整體上編碼後資料會比原來多約1/3。以下是通過todataurl存儲後的圖檔和原圖大小相關對比資料(<code>資料僅供參考，不具通用性</code>)：
可見存儲後圖檔體積并不是原來的4/3，實際上處理後的圖檔都會比原圖大好幾倍，并且不同的圖檔增大的體積也是不确定的。如果是要上傳圖檔到伺服器，可以把base64轉化成blob二進制資料壓縮上傳；如果要直接在前端顯示或供使用者下載下傳，jpg還好可以設定品質參數，要是png就沒法壓縮了。
隻是用todataurl還不夠，使用者需要通過<code>手動點選圖檔-右鍵圖檔存儲為</code>來儲存圖檔，如果要實作點選下載下傳按鈕自動下載下傳圖檔還需要修改圖檔類型為octet-stream，然後利用html5的download屬性強制讓浏覽器下載下傳。
有了以上基礎，再結合成熟的圖形處理算法，我們可以完成日常工作中大部分圖像處理需求，以下列出了一些相關輪子可做備胎。備胎這種東西多多益善，萬一以後用到了呢？
<code>注意：本人很專一。</code>
将web頁面通過canvas來實作截屏，其原理就是周遊dom結構和樣式，然後在canvas中繪制出來，通過todataurl輸出圖檔。但由于canvas圖檔的同源政策限制，如果圖檔和網站不同源的話會截取不出來的。另外在微信中測試時，即使用同源的圖檔截取出來的圖檔也有問題，是以要想将其用于生産環境，還是得看場景，有很多坑要踩。
代碼轉圖檔工具。有時候你在不同的平台寫文章貼代碼，由于不同平台代碼格式化規範不一，是以經常會出現代碼排版問題，通過這個工具将代碼轉成圖檔就可以避免排版問題了。
一個專門用來做圖檔裁剪的應用。
這是一個專業的計算機視覺處理js庫，包含了大量圖形處理算法，可用來做人臉識别，色彩追蹤等酷炫功能。
用js動态生成二維碼，這個庫還是很實用的，原理就是qrcode算法+canvas繪圖，不支援canvas的用table相容。
騰訊出的基于html5的專業級圖像處理開源引擎，功能很強大，簡直就是web版的ps。
講完位圖再說矢量圖。矢量圖在繪制圖示、商業logo、動畫元素上應用非常廣範。web最開始支援的矢量圖形并不是現在的svg，而是微軟主推的vml，是以在低版本ie下面隻支援vml而不支援svg，直到後來svg成為w3c标準并被普及，微軟才在ie9中支援svg。
如果你的圖像特效隻是用來給使用者展示，并不需要存儲的話，可以直接用css處理，基本的調整圖檔大小、拉伸、旋轉、裁切等操作直接幾個css屬性width/height/skew/rotate/clip-path等就能搞定了。如果想加特效，使用css濾鏡duang的一下就出來了，不需要任何圖形學基礎和數學知識：