系列文章
Day 11 - 圖片效果 - 細節飽和度
色彩模型調整 昨天完成調整飽和度，但是拉到靠近右邊時，卻發現原本看起來白色的雲卻轉變成藍色的現像。 一開始還以為是公式轉換算錯，所以用了一開始寫的 RGB 獲...
Day 12 - 圖片效果 - 暗部 / 亮部
暗部 / 亮部 今天來介紹暗部( shadow )、亮部( hightLight )的調整。 暗部亮部的調整相較於其他前面幾個介紹的濾鏡來說有點不同，像是對比度...
Day 13 - 圖片效果 - 銳利化
銳利化 銳利化會對圖像的邊緣輪廓加強，使得像素跟像素之間的邊界越來越明顯，可以讓圖片看起來變得更清晰，也因為我們總會被圖片對比最高的地方吸引，所以也可以用來強調...
Day 14 - Canvas 圖片保存 Part 1
圖片保存 前面辛辛苦苦的做出一些效果調整，今天開始來介紹如何保存我們辛苦的成果吧！ 在這邊我們會使用到一個 Canvas 的方法 toDataURL，這個方法會...
Day 15 - 圖片保存 Part 2 & 小結
Day 15 - 圖片保存 Part 2 圖片保存 昨天介紹到了使用 daraUrl 來完成圖片下載，但到最後面發現當圖片超過一定大小時，會無法成功下載，今天就...
Day 16 - CSS 原生濾鏡
原生濾鏡 前面都在提說如何用 JaveScript 去改變圖像中的每個像素值來達成我們想要的效果，但其實在原生 CSS 中就有提供一些屬性來提供效果，今天我們就...
Day 17 - Canvas 影片播放
影片播放 今天來介紹如何播放影片，並且套用我們先前做的濾鏡效果，影片可以想像成由每一張照片組成，而每秒照片的多寡就稱為 fps (Frame per secon...
Day 18 - Canvas 影片彈幕
影片彈幕 昨天介紹了如何將 Video 來源同步繪製到 Canvas 上面，並且套用我們先前做的濾鏡效果，今天繼續來介紹在影片中很常見的觀眾互動彈幕效果。 在...
Day 19 - Canvas 效能調整 - Web Worker
Day 19 - Canvas 效能調整 - WebWorker 效能調整 進行到這邊之後，目前依照我的電腦情況，在進行某些濾鏡操作時，會發現畫面會有明顯的卡頓...
Day 20 - Canvas 效能調整 - OffscreenCanvas 及 ImageBitmap (上)
API 介紹 這次主要會實作 ImageBitmap 以及 OffscreenCanvas 兩個新的 API，這兩個目前支持度最好的目前只有最新版的 chro...