系列文章
Day 21 - Canvas 效能調整 - OffscreenCanvas 及 ImageBitmap (下)
OffscreenCanvas 昨天我們成功將 ImageBitmap 送到 worker，今天我們要來解決的是如何在 worker 裡面處理 Canvas 的...
Day 22 - Canvas 效能調整 - Webassembly (上)
動態語言與靜態語言 相信大家都知道 Javascript 是一個動態語言，也就是說瀏覽器在執行的時候其實會需要多一個步驟去將程式碼轉譯為機器可以讀懂的行為，而這...
Day 23 - Canvas 效能調整 - Webassembly (下)
濾鏡效能調整 進行到這邊之後，目前依照我的電腦情況，來記錄一下目前最耗時的銳利化濾鏡平均需要耗費的處理時間 ( 單一個濾鏡效果做測試 ) 濾鏡 時間( 毫...
Day 24 - Canvas 常用套件 - fabric js 介紹
Day 24 - Canvas 常用套件 - fabric js 介紹 之前的實作上幾乎都是使用原生的方式跟 Canvas 作互動或者影像處理，而其實現在有許多...
Day 25 - 做個梗圖編輯器 (上)
Day 25 - 做個梗圖編輯器 (上) 昨天介紹到了如何使用 fabricjs 的基本用法，今天就拿來做一些應用吧，這次主要是參考了 imgflip 的功能，...
Day 26 - 做個梗圖編輯器 (下)
昨天做出來了基本的雛形，今天就來完善吧，目前比較嚴重的問題是在移動的時候，字體是可以被移出去邊界外 為了解決這個問題， fabric 提供了很多事件可以讓我們...
Day 27 - handtrack.js
隨著影像辨識及機器學習的進步，tensorflow 也推出了瀏覽器版本，讓使用者可以在瀏覽器中使用模型及訓練，也因此為互動上帶來更多可能，但對於機器學習沒有經驗...
Day 28 - 做個刮刮樂
Day 28 - 做個刮刮樂 昨天介紹了可以追蹤手位置的套件，今天用來做一個刮刮樂效果吧！ 實作 要實作刮刮樂效果，需要兩個 Canvas，其中一個是最後想呈現...
Day 29 - Web Ar
Vr、Ar，最近這幾年想必大家都一直廣泛聽到這兩個詞，而這兩個差別在哪裡呢 Vr 全名為 Virtual Reality，代表說你看到的東西是由電腦模擬出來...
Day 30 - 小結
緣起 總算來到這一天啦~當初會選擇跟影像相關的主要是本身也喜歡拍照，想說自己平常用了這麼久的修圖軟體但是一直沒好好搞懂背後的原理，才萌生出要做類似概念的網頁，雖...