源頭

相信許多喜好拍照的朋友一定都對 Photoshop 或 Lightroom 這兩個影像編輯軟體不陌生吧，透過這兩個軟體我們可以為我們的照片做出許多的調整，而在網頁上我們也可以使用 Canvas 對照片進行處理，而隨著在網頁上運行的效能越來越提升，讓這些需要大量運算的領域也能在前端大放異彩，而本次系列文將會嘗試實作簡易版的圖像處理網頁

就讓接下來的30天讓我們一探究竟吧！

系列文大鋼

• HTML Canvas 基礎及應用
• 圖片格式 & 色彩模型
• 圖片處理
• 效能調整

系列文介紹

此系列文將從 Canvas 基本觀念開始，基本圖片獲取到圖片處理、在到之後的效能調整，一步步理解圖片處理背後的邏輯，讓使用者最後能夠自在地在網頁中處理影像並理解其中原理。

簡介

在一開始，首先介紹 Canvas 這個 HTML 標籤，根據 MDN文件 Canvas會在網頁中渲染出一塊區域，使程式可以與其互動，主要用途是用在繪畫、數據呈現、影像處理、遊戲、特效等等

所以 Canvas 可以拿來做很多事情，而在本系列當中，會主要著重在影像處理這一塊，透過 Canvas 處理獲取圖片像素後，經過一些運算處理後達成我們想要的效果!

在開始之前

使用技術

• Vue系列
• 現代 ES
• Webpack

如果文章中程式碼有不詳盡之處可以至 Github 找尋。

就讓我們繼續往下看吧。