iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Rust

把前端加速到天花板:Rust+WASM 即插即用外掛 系列

30 天用 Rust 打包 WASM,做出 3 個可直接在瀏覽器用的外掛:Markdown 超速轉換、圖片壓縮/縮放、超大 CSV 串流解析。提供 React/Next 範例與 Web Worker 版本,一行 import 即用。

參賽天數 25 天 | 共 25 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 0|預備知識與開發環境

痾其實我也不知道會不會完賽,升上研究所之後變得好忙... 在寫套件之前,我們要知道自己要把什麼東西「造出來」、用什麼工具「把它運到瀏覽器」,以及前端如何「優雅...

2025-09-15 ‧ 由 ali8888 分享
DAY 2

Day 1|MVP(官方 Hello World + Vite)

今天直接讓 Rust 跑進瀏覽器,這樣才有感覺有在學東西。 你會拿到 一個用 wasm-pack 產生的 pkg 在 Vite 專案裡 import → aw...

2025-09-16 ‧ 由 ali8888 分享
DAY 3

Day 2|把套件「外觀」定好:type=module / exports / types

今天把套件的「門面」定好,之後前端就能用一條乾淨的 import,這樣內裝怎麼改、檔名怎麼動,外面都不會受影響。 前情提要 你有 Day 2 產的 pkg/...

2025-09-17 ‧ 由 ali8888 分享
DAY 4

Day 3|API 契約 v1:string / number / Uint8Array

今天做的是把跨邊界要用的型別先定成三種——string、number、Uint8Array。字串拿來傳訊息或模式名,數字拿來放參數(在 wasm-bindgen...

2025-09-18 ‧ 由 ali8888 分享
DAY 5

Day 4|第一個影像 API:把一張圖「變灰」

好,昨天我們把 JS ↔ Rust 的交流通道打通,知道初始化、匯入、以及 Uint8Array 如何穿越邊界。今天正式動手做第一個功能:把一張圖變灰。為什麼從...

2025-09-19 ‧ 由 ali8888 分享
DAY 6

Day 5|亮度與對比:把參數塞進去

灰階寫完之後,我們就來寫下「亮度/對比」。這兩個剛好能驗證我們 Day 3 的契約在「有參數」的情境下會不會卡住:一樣走 Uint8Array 當像素、w*h*...

2025-09-20 ‧ 由 ali8888 分享
DAY 7

Day 6|小小的 pipeline 串起來 o(☆Ф∇Ф☆)o

灰階、亮度/對比都能動了,但每次都要「取像素 → 呼叫一支 → 貼回 → 再取像素 → 再呼叫……」很囉嗦。今天把它變成一次丟一串操作,WASM 在 Rust...

2025-09-21 ‧ 由 ali8888 分享
DAY 8

Day 7|模糊 × 銳化一次滿足

昨天把「一串效果」丟進 WASM 一口氣跑完,今天就加兩個最常用的功能:模糊和銳化。模糊我選擇「方框模糊(box blur)」,因為它好寫、速度穩、視覺感受也很...

2025-09-22 ‧ 由 ali8888 分享
DAY 9

Day 8|ping-pong buffer : 把我的心也乒乒乓乓

目前每套一個效果就回傳一個新的 Vec<u8>,三個效果就配三次、複製三次,跑 4K 圖片時 GC 和 allocator 會太多。今天不動前端呼叫...

2025-09-23 ‧ 由 ali8888 分享
DAY 10

Day 9|銳化與對比效果組合(Unsharp Mask)

unsharp mask 是想像把一張圖「模糊」成低頻版,再用原圖去減掉低頻,得到的就是高頻細節(邊緣、紋理)。最後把高頻乘上一個比例加回原圖,邊緣就會變利。這...

2025-09-24 ‧ 由 ali8888 分享