第十一屆 佳作

web
用 Javascript 當個影像魔術師
lb01910483

系列文章

DAY 1

Day 01 - 前言

源頭 相信許多喜好拍照的朋友一定都對 Photoshop 或 Lightroom 這兩個影像編輯軟體不陌生吧,透過這兩個軟體我們可以為我們的照片做出許多的調整,...

DAY 2

Day 02 - Canvas 簡介

讀取圖片 首先,我們先來創造一個 Canvas 元素,及一個 input 來當作圖片輸入源 <input type="file"...

DAY 3

Day 03 - 圖片格式簡介(RGBA)

獲取圖片 在上一章節中,我們已經成功將圖片繪畫至 Canvas 上,而接下來就是該如何取得上面的資訊了 這次我們調用渲染環境的另一個方法,getImageDat...

DAY 4

Day 04 - 圖片資訊

顏色資訊 在上一章節中,講解了如何從圖片中獲取資訊,這章就來實做一個在影像編輯軟體中常見的功能,在滑鼠遊標移到圖片像素的時候,即時顯示該點的資訊。 首先將 Ca...

DAY 5

Day 05 - 圖片效果 - 灰階、反轉

顏色處理 接下來我們就可以將拿到的圖片資訊做一下處裡啦! 因為同種效果可能就有好幾種不同的實作方式,所以在接下來的演算法地方如果有不對之處還請各位大大不吝指教...

DAY 6

Day 06 - 圖片效果 - 曝光度

曝光度調整 接下來繼續介紹一個也很實用的功能,曝光度調整。 一樣傳入 Uint8ClampArray,並且將透過 amount 來調整亮度 ( 使用的區間是 -...

DAY 7

Day 07 - 直方圖顯示

用途 我們這次要做的是亮度值方圖,在相機或者是編輯軟體上都會呈現亮度直方圖方便查看呈現的是暗部到亮部的像素分佈圖,也就是說整體越偏向左邊,代表畫面中暗部像素較多...

DAY 8

Day 08 - 圖片效果 - 對比

Day 8 圖片效果 - 對比度 對比度 今天介紹一下修照片時常用的功能,對比度調整。 對比度可以想像成圖片中亮部與暗部的差距,當對比度越高時,畫面中亮暗差距就...

DAY 9

Day 09 - 圖片色彩模型

色彩模型 在繼續往下介紹其他調整之前,要先來介紹一下色彩模型。 之前介紹的顏色展現方式我們都是用 RGB 三個通道的值來表示,也就是俗稱的 加法模型 當然前端在...

DAY 10

Day 10 - 圖片效果 - 飽和度

Day 10 圖片效果 - 飽和度 飽和度 昨天已經介紹到已經將顏色轉成 HSV 的形式,那今天就可以來介紹飽和度調整的部分囉,飽和度也是調整照片中常用的選項,...