鐵人檔案
相信許多喜好拍照的朋友一定都對 Photoshop 或 Lightroom 這兩個影像編輯軟體不陌生吧
透過這兩個軟體我們可以為我們的照片做出許多的調整，而在網頁上我們也可以使用 Canvas 對照片進行處理，而隨著在網頁上運行的效能越來越提升，原本這些需要大量運算的領域是不是也有機會在純前端處理呢
本次系列文將會嘗試實作簡易版的圖像處理網頁，就讓接下來的30天讓我們一探究竟吧！
源頭 相信許多喜好拍照的朋友一定都對 Photoshop 或 Lightroom 這兩個影像編輯軟體不陌生吧，透過這兩個軟體我們可以為我們的照片做出許多的調整，...
讀取圖片 首先，我們先來創造一個 Canvas 元素，及一個 input 來當作圖片輸入源 <input type="file"...
獲取圖片 在上一章節中，我們已經成功將圖片繪畫至 Canvas 上，而接下來就是該如何取得上面的資訊了 這次我們調用渲染環境的另一個方法，getImageDat...
顏色資訊 在上一章節中，講解了如何從圖片中獲取資訊，這章就來實做一個在影像編輯軟體中常見的功能，在滑鼠遊標移到圖片像素的時候，即時顯示該點的資訊。 首先將 Ca...
顏色處理 接下來我們就可以將拿到的圖片資訊做一下處裡啦！ 因為同種效果可能就有好幾種不同的實作方式，所以在接下來的演算法地方如果有不對之處還請各位大大不吝指教...
曝光度調整 接下來繼續介紹一個也很實用的功能，曝光度調整。 一樣傳入 Uint8ClampArray，並且將透過 amount 來調整亮度 ( 使用的區間是 -...
用途 我們這次要做的是亮度值方圖，在相機或者是編輯軟體上都會呈現亮度直方圖方便查看呈現的是暗部到亮部的像素分佈圖，也就是說整體越偏向左邊，代表畫面中暗部像素較多...
Day 8 圖片效果 - 對比度 對比度 今天介紹一下修照片時常用的功能，對比度調整。 對比度可以想像成圖片中亮部與暗部的差距，當對比度越高時，畫面中亮暗差距就...
色彩模型 在繼續往下介紹其他調整之前，要先來介紹一下色彩模型。 之前介紹的顏色展現方式我們都是用 RGB 三個通道的值來表示，也就是俗稱的 加法模型 當然前端在...
Day 10 圖片效果 - 飽和度 飽和度 昨天已經介紹到已經將顏色轉成 HSV 的形式，那今天就可以來介紹飽和度調整的部分囉，飽和度也是調整照片中常用的選項，...
