2025年03月04日玄貓（BlackCat）

WebAssembly網頁前端高效能影像處理

本文探討如何利用 WebAssembly（Wasm）和 Rust 實作網頁前端高效能影像處理，包含影像處理基礎、JavaScript 與 Wasm 整合、Rust 實作範例以及 Yew

Web 開發效能最佳化

WebAssembly Wasm Rust 影像處理前端效能 Yew

在網頁應用中，影像處理通常是效能瓶頸之一。透過 WebAssembly（Wasm），我們可以將高效能的 Rust 程式碼編譯成瀏覽器可執行的格式，從而提升影像處理速度。本文將示範如何使用 Wasm 和 Rust 建立一個圖片縮放功能，並探討如何將其整合至 JavaScript 前端應用中。首先，我們會建立一個基本的 JavaScript 應用程式，用於載入和顯示圖片。接著，我們將使用 Rust 編寫一個 shrink_by_half 函式，負責將圖片縮小一半。最後，我們會將 Rust 程式碼編譯成 Wasm，並在 JavaScript 中呼叫該函式，實作圖片縮放功能。這個過程涉及到 JavaScript 和 Wasm 之間的資料傳遞，以及如何在 Canvas 上顯示處理後的圖片。

使用WebAssembly實作高效能網頁前端影像處理

在現代網頁開發中，影像處理是一項常見的需求。隨著WebAssembly（Wasm）的出現，開發者能夠將高效能的程式碼帶入網頁應用中。在本章中，我們將探討如何利用Wasm和Rust實作高效能的影像處理。

影像處理基礎

在開始之前，瞭解影像處理的基本概念是非常重要的。影像可以被表示為畫素的集合，每個畫素包含顏色資訊。常見的顏色表示法包括RGB（紅、綠、藍）或RGBA（紅、綠、藍、透明度）。在我們的範例中，我們將使用RGBA表示法，其中每個畫素由四個u8值表示：紅色、綠色、藍色和透明度。

建立基本的JavaScript應用

首先，我們需要建立一個基本的JavaScript應用，能夠載入影像並將其顯示在<canvas>元素上。

程式碼解析

function setup() {
    const fileInput = document.getElementById('file');
    const canvas = document.getElementById('preview');
    const shrinkButton = document.getElementById('shrink');

    fileInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        const imageUrl = window.URL.createObjectURL(file);
        const image = new Image();
        image.src = imageUrl;

        image.addEventListener('load', () => {
            canvas.width = image.naturalWidth;
            canvas.height = image.naturalHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);
        });
    });

    shrinkButton.addEventListener('click', () => {
        // 稍後實作縮小影像的邏輯
    });
}

if (document.readyState !== 'loading') {
    setup();
} else {
    window.addEventListener('DOMContentLoaded', setup);
}

內容解密：

setup函式：此函式負責設定事件監聽器和處理影像載入。
fileInput事件監聽器：當使用者選擇新的檔案時觸發，讀取檔案並將其轉換為HTMLImageElement顯示在<canvas>上。
image.addEventListener('load', ...)：當影像載入完成後，設定<canvas>的寬高並繪製影像。
shrinkButton事件監聽器：稍後將實作縮小影像的邏輯。

將影像傳遞給Wasm

要實作高效能的影像處理，我們需要將影像資料傳遞給Wasm模組。影像資料可以被表示為一維的Vec<u8>或Uint8ClampedArray，其中每個畫素由四個u8值（RGBA）組成。

Rust實作

use image::{RgbaImage};
use image::imageops;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn shrink_by_half(
    original_image: Vec<u8>,
    width: u32,
    height: u32
) -> Vec<u8> {
    let image: RgbaImage = image::ImageBuffer::from_vec(width, height, original_image).unwrap();
    let output_image = imageops::resize(&image, width / 2, height / 2, imageops::FilterType::Nearest);
    output_image.into_vec()
}

內容解密：

shrink_by_half函式：接收原始影像資料、寬度和高度，將影像縮小一半後傳回新的影像資料。
image::ImageBuffer::from_vec：將一維的Vec<u8>轉換為二維的RgbaImage。
imageops::resize：使用指定的過濾器（此例中使用Nearest）將影像縮小。
.into_vec()：將處理後的RgbaImage轉換回Vec<u8>。

結合JavaScript和Wasm

在JavaScript端，我們需要呼叫Wasm模組中的shrink_by_half函式，並將處理後的影像資料顯示在<canvas>上。

import * as wasm from '../pkg/wasm_image_processing';

// 在setup函式中新增
shrinkButton.addEventListener('click', () => {
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const shrunkImageData = wasm.shrink_by_half(
        new Uint8Array(imageData.data.buffer),
        canvas.width,
        canvas.height
    );
    // 處理並顯示縮小後的影像
});

內容解密：

wasm.shrink_by_half：呼叫Wasm模組中的函式，將原始影像資料縮小一半。
new Uint8Array(imageData.data.buffer)：將<canvas>中的影像資料轉換為Uint8Array以傳遞給Wasm。
處理並顯示縮小後的影像：將Wasm傳回的資料轉換回ImageData並繪製到<canvas>上。

使用WebAssembly最佳化網頁前端圖片處理效能

在現代網頁開發中，圖片處理是一項常見的需求。傳統上，這些處理工作通常在JavaScript中完成，但隨著WebAssembly（Wasm）的出現，開發者可以將效能密集的任務，如圖片處理，轉移到Wasm中執行，以獲得更好的效能。

整合Wasm圖片處理函式庫

首先，我們需要在專案中整合一個使用Rust編寫並編譯為Wasm的圖片處理函式庫。假設我們有一個名為wasm-image-processing的函式庫，它提供了圖片縮小功能。

import * as wasmImage from "wasm-image-processing";

function setup(event) {
    // ... 省略其他設定程式碼 ...
    const shrinkButton = document.getElementById('shrink');
    shrinkButton.addEventListener('click', function(event) {
        const canvas = document.getElementById('preview');
        const canvasContext = canvas.getContext('2d');
        const imageBuffer = canvasContext.getImageData(0, 0, canvas.width, canvas.height).data;
        
        // 使用Wasm函式庫縮小圖片
        const outputBuffer = wasmImage.shrink_by_half(imageBuffer, canvas.width, canvas.height);
        
        // 將處理後的圖片資料轉換為適合canvas使用的格式
        const u8OutputBuffer = new ImageData(new Uint8ClampedArray(outputBuffer), canvas.width / 2, canvas.height / 2);
        
        // 清除canvas並更新其大小
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width /= 2;
        canvas.height /= 2;
        
        // 將縮小後的圖片繪製到canvas上
        canvasContext.putImageData(u8OutputBuffer, 0, 0);
    });
}

內容解密：

getImageData 方法：從canvas中取得圖片資料。引數依次為起始X座標、起始Y座標、寬度和高度。
wasmImage.shrink_by_half 函式：由Rust編譯為Wasm的圖片縮小函式，接收原始圖片資料、寬度和高度，傳回縮小後的圖片資料。
ImageData 和 Uint8ClampedArray：用於處理和表示圖片資料的物件和型別，確保資料正確無誤地傳遞給Wasm函式和canvas。
clearRect、width、height 和 putImageData：用於清除canvas、更新其大小並繪製新圖片的方法和屬性。

設定專案依賴

為了使上述程式碼正常運作，需要在package.json中正確設定依賴關係，確保Wasm函式庫被正確引入。

{
    "name": "create-wasm-app",
    // ...
    "dependencies": {
        "wasm-image-processing": "file:../pkg"
    },
    "devDependencies": {
        // 省略其他開發依賴...
    }
}

測試應用程式

在wasm-image-processing目錄下執行wasm-pack build，將Rust程式碼編譯為Wasm。
切換到client目錄，執行npm install && npm run start。
開啟瀏覽器存取http://localhost:8080，選擇一張圖片並點選“縮小”按鈕，觀察圖片是否正確縮小。

進一步最佳化

直接在Rust/Wasm中載入圖片：避免不必要的JavaScript和Wasm之間的資料複製，提高效能。
使用Web Worker：將圖片處理任務放到背景執行緒中，避免阻塞主執行緒，提升使用者經驗。

使用Rust編寫整個前端

藉助Virtual DOM的概念和相關的Rust框架，可以完全用Rust編寫前端程式碼，並編譯為Wasm執行在瀏覽器中。這種方式可以充分利用Rust的效能優勢和安全性，同時保持前端開發的宣告式風格。

透過這種方法，開發者可以更高效地開發高效能的網頁應用，同時享受到Rust語言帶來的諸多好處。

使用Yew框架建立高效能Web前端

Yew是一個流行的前端框架，受到React和Elm的設計影響。本文將介紹如何使用Yew建立一個最小的Hello World專案。

設定Hello World專案

首先，使用Cargo建立一個新的Rust crate，並新增Yew作為依賴項。執行以下命令：

$ cargo new hello-yew-world
$ cd hello-yew-world
$ cargo add yew --features csr

接下來，更新Cargo.toml檔案以符合以下內容：

[package]
name = "yew-app"
version = "0.1.0"
edition = "2021"

[dependencies]
yew = { version = "0.20.0", features = ["csr"] }

建立Yew應用程式

更新main.rs檔案以定義兩個元件：App和Button。

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! { <Button value=0/> }
}

#[derive(Properties, PartialEq)]
struct ButtonProp {
    value: i64
}

#[function_component(Button)]
fn increment_button(button: &ButtonProp) -> Html {
    let counter = use_state(|| button.value);
    let on_click = {
        let counter = counter.clone();
        move |_| {
            let new_value = *counter + 1;
            counter.set(new_value);
        }
    };
    html! {
        <div>
            <button onclick={on_click}>
                { "+1" }
            </button>
            <p>{*counter}</p>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

內容解密：

App元件使用html!巨集定義了一個包含Button元件的HTML元素。
Button元件具有一個value屬性，用於定義其初始值。
ButtonProp結構體代表了Button元件的屬性，需要使用Properties和PartialEq衍生屬性。
increment_button函式定義了Button元件的行為，包括點選事件處理和狀態更新。

建立index.html檔案

在hello-yew-world目錄中建立一個新的index.html檔案，內容如下：

<!DOCTYPE html>
<html lang="en">
<head> </head>
<body></body>
</html>

建置和執行應用程式

安裝Trunk套件並使用以下命令建置和執行應用程式：

$ cargo install trunk
$ trunk serve --open

這將建置應用程式、啟動網頁伺服器並開啟瀏覽器連線到http://127.0.0.1:8080。

內容解密：

Trunk套件是一個Wasm網頁應用程式封裝工具。
trunk serve --open命令將建置應用程式、啟動網頁伺服器並開啟瀏覽器。

使用 Yew 框架構建高效能網頁前端的實戰

建構元件化的網頁應用程式

在前面的章節中，我們已經初步瞭解了 Yew 框架的基本架構和元件化開發的概念。現在，讓我們探討如何使用 Yew 來建構一個簡單的計數器元件，並進一步擴充套件到更複雜的貓咪管理應用程式（Catdex）。

簡單計數器元件的實作

首先，我們來分析一個簡單的計數器元件 increment_button 的實作：

#[function_component(Button)]
fn increment_button(button: &ButtonProp) -> Html {
    let counter = use_state(|| button.value);
    let on_click = {
        let counter = counter.clone();
        move |_| {
            let new_value = *counter + 1;
            counter.set(new_value);
        }
    };
    html! {
        <div>
            <button onclick={on_click}>
                { "+1" }
            </button>
            <p>{*counter}</p>
        </div>
    }
}

內容解密：

use_state Hook：用於初始化和儲存元件的狀態。在這個例子中，counter 被初始化為 button.value。
on_click 事件處理：當按鈕被點選時，counter 的值會增加 1。事件處理函式透過 use_state 傳回的 counter Hook 來更新狀態。
html! 宏：用於定義元件的 HTML 結構。按鈕的點選事件與 on_click 函式繫結，顯示的計數器值與 counter 狀態繫結。

這個計數器元件展示了 Yew 中狀態管理和事件處理的基本用法。當 counter 狀態改變時，Yew 會自動重新渲染相關的元件。

建構貓咪管理應用程式（Catdex）

接下來，我們將建立一個更複雜的貓咪管理應用程式，包含以下功能：

顯示貓咪列表
上傳新的貓咪資訊
刪除特定的貓咪

首先，建立一個新的 Cargo 專案並新增 Yew 依賴：

$ cargo new catdex-yew
$ cd catdex-yew
$ cargo add yew --features csr

然後，在 src/main.rs 中建立一個基本的 Yew 元件：

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    let cat_list = use_state(|| Vec::<CatDetails>::new());
    let on_change = {
        let cat_list = cat_list.clone();
        // 事件處理邏輯待實作
    };
    html! {
        <div>
            // 待實作的 HTML 結構
        </div>
    }
}

內容解密：

cat_list 狀態管理：使用 use_state Hook 管理貓咪列表的狀態。
on_change 事件處理：用於處理與貓咪列表相關的事件，例如新增或刪除貓咪。
html! 宏定義 HTML 結構：根據應用程式的需求定義相關的 HTML 結構。

透過上述步驟，我們可以逐步建構出一個功能完整的貓咪管理應用程式。這不僅展示了 Yew 在構建複雜前端應用中的能力，也體現了其在狀態管理和元件化開發方面的優勢。