30 天用 Rust 打包 WASM,做出 3 個可直接在瀏覽器用的外掛:Markdown 超速轉換、圖片壓縮/縮放、超大 CSV 串流解析。提供 React/Next 範例與 Web Worker 版本,一行 import 即用。
痾其實我也不知道會不會完賽,升上研究所之後變得好忙... 在寫套件之前,我們要知道自己要把什麼東西「造出來」、用什麼工具「把它運到瀏覽器」,以及前端如何「優雅...
今天直接讓 Rust 跑進瀏覽器,這樣才有感覺有在學東西。 你會拿到 一個用 wasm-pack 產生的 pkg 在 Vite 專案裡 import → aw...
今天把套件的「門面」定好,之後前端就能用一條乾淨的 import,這樣內裝怎麼改、檔名怎麼動,外面都不會受影響。 前情提要 你有 Day 2 產的 pkg/...
今天做的是把跨邊界要用的型別先定成三種——string、number、Uint8Array。字串拿來傳訊息或模式名,數字拿來放參數(在 wasm-bindgen...
好,昨天我們把 JS ↔ Rust 的交流通道打通,知道初始化、匯入、以及 Uint8Array 如何穿越邊界。今天正式動手做第一個功能:把一張圖變灰。為什麼從...
灰階寫完之後,我們就來寫下「亮度/對比」。這兩個剛好能驗證我們 Day 3 的契約在「有參數」的情境下會不會卡住:一樣走 Uint8Array 當像素、w*h*...
灰階、亮度/對比都能動了,但每次都要「取像素 → 呼叫一支 → 貼回 → 再取像素 → 再呼叫……」很囉嗦。今天把它變成一次丟一串操作,WASM 在 Rust...
昨天把「一串效果」丟進 WASM 一口氣跑完,今天就加兩個最常用的功能:模糊和銳化。模糊我選擇「方框模糊(box blur)」,因為它好寫、速度穩、視覺感受也很...
目前每套一個效果就回傳一個新的 Vec<u8>,三個效果就配三次、複製三次,跑 4K 圖片時 GC 和 allocator 會太多。今天不動前端呼叫...
unsharp mask 是想像把一張圖「模糊」成低頻版,再用原圖去減掉低頻,得到的就是高頻細節(邊緣、紋理)。最後把高頻乘上一個比例加回原圖,邊緣就會變利。這...