iT邦幫忙

鐵人檔案

第 11 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

用 Javascript 當個影像魔術師 系列

相信許多喜好拍照的朋友一定都對 Photoshop 或 Lightroom 這兩個影像編輯軟體不陌生吧

透過這兩個軟體我們可以為我們的照片做出許多的調整,而在網頁上我們也可以使用 Canvas 對照片進行處理,而隨著在網頁上運行的效能越來越提升,原本這些需要大量運算的領域是不是也有機會在純前端處理呢

本次系列文將會嘗試實作簡易版的圖像處理網頁,就讓接下來的30天讓我們一探究竟吧!

鐵人鍊成 | 共 30 篇文章 | 52 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11 - 圖片效果 - 細節飽和度

色彩模型調整 昨天完成調整飽和度,但是拉到靠近右邊時,卻發現原本看起來白色的雲卻轉變成藍色的現像。 一開始還以為是公式轉換算錯,所以用了一開始寫的 RGB 獲...

2019-09-26 ‧ 由 lb01910483 分享
DAY 12

Day 12 - 圖片效果 - 暗部 / 亮部

暗部 / 亮部 今天來介紹暗部( shadow )、亮部( hightLight )的調整。 暗部亮部的調整相較於其他前面幾個介紹的濾鏡來說有點不同,像是對比度...

2019-09-27 ‧ 由 lb01910483 分享
DAY 13

Day 13 - 圖片效果 - 銳利化

銳利化 銳利化會對圖像的邊緣輪廓加強,使得像素跟像素之間的邊界越來越明顯,可以讓圖片看起來變得更清晰,也因為我們總會被圖片對比最高的地方吸引,所以也可以用來強調...

2019-09-28 ‧ 由 lb01910483 分享
DAY 14

Day 14 - Canvas 圖片保存 Part 1

圖片保存 前面辛辛苦苦的做出一些效果調整,今天開始來介紹如何保存我們辛苦的成果吧! 在這邊我們會使用到一個 Canvas 的方法 toDataURL,這個方法會...

2019-09-29 ‧ 由 lb01910483 分享
DAY 15

Day 15 - 圖片保存 Part 2 & 小結

Day 15 - 圖片保存 Part 2 圖片保存 昨天介紹到了使用 daraUrl 來完成圖片下載,但到最後面發現當圖片超過一定大小時,會無法成功下載,今天就...

2019-09-30 ‧ 由 lb01910483 分享
DAY 16

Day 16 - CSS 原生濾鏡

原生濾鏡 前面都在提說如何用 JaveScript 去改變圖像中的每個像素值來達成我們想要的效果,但其實在原生 CSS 中就有提供一些屬性來提供效果,今天我們就...

2019-10-01 ‧ 由 lb01910483 分享
DAY 17

Day 17 - Canvas 影片播放

影片播放 今天來介紹如何播放影片,並且套用我們先前做的濾鏡效果,影片可以想像成由每一張照片組成,而每秒照片的多寡就稱為 fps (Frame per secon...

2019-10-02 ‧ 由 lb01910483 分享
DAY 18

Day 18 - Canvas 影片彈幕

影片彈幕 昨天介紹了如何將 Video 來源同步繪製到 Canvas 上面,並且套用我們先前做的濾鏡效果,今天繼續來介紹在影片中很常見的觀眾互動彈幕效果。 在...

2019-10-03 ‧ 由 lb01910483 分享
DAY 19

Day 19 - Canvas 效能調整 - Web Worker

Day 19 - Canvas 效能調整 - WebWorker 效能調整 進行到這邊之後,目前依照我的電腦情況,在進行某些濾鏡操作時,會發現畫面會有明顯的卡頓...

2019-10-04 ‧ 由 lb01910483 分享
DAY 20

Day 20 - Canvas 效能調整 - OffscreenCanvas 及 ImageBitmap (上)

API 介紹 這次主要會實作 ImageBitmap 以及 OffscreenCanvas 兩個新的 API,這兩個目前支持度最好的目前只有最新版的 chro...

2019-10-05 ‧ 由 lb01910483 分享