react结合rust编写wasm图像处理

源码：https://github.com/yirandidi/react_vite_wasm

结果测试：https://yirandidi.github.io/react_vite_wasm/

rsw安装参照官方文档即可，非常详细简单。直入正题。

https://github.com/rwasm/vite-plugin-rsw

rust安装image依赖

https://docs.rs/image/0.24.3/image

https://github.com/image-rs/image

编写简单的滤镜处理mod

use image::{DynamicImage, GenericImage, GenericImageView, ImageBuffer};
use wasm_bindgen::Clamped;
use web_sys::ImageData;pub struct ImageFilter {image_mut: DynamicImage,
}impl ImageFilter {pub fn new(data: ImageData) -> ImageFilter {let width = data.width();let height = data.height();let raw_pixels = data.data().to_vec();let img_buffer = ImageBuffer::from_vec(width, height, raw_pixels).unwrap();let image = DynamicImage::ImageRgba8(img_buffer);ImageFilter { image_mut: image }}pub fn to_gray(&self) -> ImageFilter {let mut last_mut = self.image_mut.clone();let width = last_mut.width();let height = last_mut.height();for x in 0..width {for y in 0..height {let pixel = self.image_mut.get_pixel(x, y);let r = pixel[0] as f32;let g = pixel[1] as f32;let b = pixel[2] as f32;let a = pixel[3];let gray = (r * 0.3 + g * 0.59 + b * 0.11) as u8;let new_pixel = image::Rgba([gray, gray, gray, a]);last_mut.put_pixel(x, y, new_pixel)}}ImageFilter {image_mut: last_mut,}}pub fn to_image_data(&self) -> ImageData {ImageData::new_with_u8_clamped_array_and_sh(Clamped(&mut self.image_mut.to_rgba8()),self.image_mut.width(),self.image_mut.height(),).unwrap()}
}

在lib.rs中使用

use image_filter::ImageFilter;
use wasm_bindgen::prelude::*;
use web_sys::ImageData;#[wasm_bindgen]
pub fn canvas_to_gray(image_data: ImageData) -> ImageData {ImageFilter::new(image_data).to_gray().to_image_data()
}mod image_filter;

编写组件

import React, { createRef, useEffect } from 'react'
import init, { canvas_to_gray } from '@wasm/image'
import style from './WasmCanvas.module.scss'
import filterimage from '@/assets/wallhaven-wqve97.png'
import type { RefObject } from 'react'function scaleImage(image: HTMLImageElement, maxSize: number) {let width = image.widthlet height = image.heightconst p = width / heightif (width > maxSize || height > maxSize) {if (width > height) {width = maxSizeheight = width / p} else {height = maxSizewidth = height * p}}return { width, height }
}function createCanvas(canvasRef: RefObject<HTMLCanvasElement>) {const { current: canvas } = canvasRefif (!canvas) throw new Error('Canvas ref is null')const image = new Image()image.onload = () => {const { width, height } = scaleImage(image, 1000)canvas.width = widthcanvas.height = heightconst ctx = canvas.getContext('2d')!ctx.drawImage(image, 0, 0, width, height)to_gray(ctx, canvas)}image.src = filterimage
}let isInit = false
async function initWasm() {if (!isInit) {isInit = trueawait init()}
}async function to_gray(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {await initWasm()const { width, height } = canvasconst imageData = ctx.getImageData(0, 0, width, height)// 计算函数运行时间console.time('canvas_to_gray time')const grayImageData = canvas_to_gray(imageData)console.timeEnd('canvas_to_gray time')ctx.putImageData(grayImageData, 0, 0)
}export default function WasmCanvas() {const canvasRef = createRef<HTMLCanvasElement>()useEffect(() => {createCanvas(canvasRef)}, [])return <canvas className={style.wasm_canvas} ref={canvasRef} />
}

react结合rust编写wasm图像处理相关推荐

rust语言编写wasm简单例子
rust的wasm使用wasm-pack来build,有很多选项和target用于不同的目的,本文描述一个最简单的示例,不使用webpack和npm,让你可以快速入门和了解. 全局安装 wasm-pa ...
Rust 构建 Wasm 模块
Rust 构建 Wasm 模块文章目录 Rust 构建 Wasm 模块正文 1. 安装 1.1 使用 Rustup 安装 Rust 1.2 安装 wasm-pack 1.3 CLion 配置 2. ...
Rust编写的新终端多路复用器
Zellij是用Rust编写的新的终端工作区和多路复用器(如tmux和screen),可用于macOS和Linux.其最重要的功能之一是布局系统,以及以任何可编译为WebAssembly的语言编写的插 ...
纯Rust编写的机器学习框架Neuronika，速度堪比PyTorch
机器之心报道编辑:陈萍这是一个用 Rust 编写的机器学习框架,与 PyTorch 类似,现已实现最常见的层组件(dense 层.dropout 层等),速度堪比 PyTorch. Rust 作为 ...
超棒！纯Rust编写的机器学习框架，速度堪比PyTorch
点上方计算机视觉联盟获取更多干货仅作学术分享,不代表本公众号立场,侵权联系删除转载于:机器之心 AI博士笔记系列推荐周志华<机器学习>手推笔记正式开源!可打印版本附pdf下载链接这 ...
系统无法执行指定的程序。_使用Rust编写操作系统（一）：独立式可执行程序
创建一个不连接标准库的Rust可执行文件,将是我们迈出的第一步.无需底层操作系统的支撑,这将能让在裸机(bare metal)上运行Rust代码成为现实. 简介要编写一个操作系统内核,我们需要不基于 ...
一步一步使用标c编写跨平台图像处理库_让一个图像变成反向图像
接着上一章一步一步使用标c编写跨平台图像处理库,本章将介绍如何让一个图像变成反向图,其原理非常简单,只需要让每个像素点上的RGB三色取反即可!变成负数! 其公式为: s = -r-g-b 转换方式: ...
asm 编写 wasm 对比原生性能
原文链接: asm 编写 wasm 对比原生性能上一篇: ramda 日常使用下一篇: asm 数组的双向传递目前go由于运行时太大了, 不带gc又会出现很多问题 tinygo及其不稳定, de ...
rust服务器配置文件,使用Rust编写一个简单的Socket服务器（1）：Rust下的配置载入...
前言早在2020年12月的时候,那会儿我正在看The Rust Programming Language.而这本书最后的"结业"任务是要编写一个简单的Socket服务器,而于此同 ...

react结合rust编写wasm图像处理

react结合rust编写wasm图像处理相关推荐

最新文章

热门文章