rust图形编程_用 React + Rust(WebAssembly 模块)开发的简易图像处理 WebApp

入口

简介

去年底开始学的 Rust, 直到今年春节后, 感觉入了点门, 就想做点啥练练手, 由于一直对图像处理很感兴趣, 且此类应用比较能发挥出 WebAssembly 的特性, 于是折腾一番, 就有了这个 App. 本想等到功能稍微多些, 到了勉强可日常使用的程度再发布, 没想到实际开发中, 难度和工作量远超我的预期, 只能先发布再说.

注: 貌似移动端暂时都不支持 WebAssembly, 因此你只能用桌面 Chrome/Firefox 打开.

基本功能:

Transform: 其实也就裁剪, 旋转(暂时只支持 ±90 度), 水平 /垂直镜像, 缩小

Color: 彩色转黑白, Hue, Saturation, Intensity 的调整, 对比度 /亮度的调整

Filter

像素化(俗称的马赛克效果)

高斯模糊

柔滑: 我提供了 2 个有雀斑的明星照片, 比较能体现出该功能的效果

微缩模型化: 就是使照片主体看上去像微缩后的模型一样, 我也提供了 2 张俯视的照片体现其效果. 但该功能做的还有些缺陷, 和 PhotoShop 做的效果有一定差距

某些功能, 如”柔滑”, 其底层的 Bilateral Filter 算法, 我暂时没精力和时间优化, 用的是最粗暴的实现法, 因此执行效率很低, 需要 10 秒以上, 它有 2 个参数: 迭代次数(每次柔滑的结果作为下次的输入), 柔滑半径, 当这 2 个参数值设的较大时, 会产生卡通效果, 如下图所示:

但执行时间会变态到 1, 2 分钟(图片越大, 时间越长, 尽量不要载入长 /宽超过 1000px 的图片), 且执行期间, 你无法关闭该页面.

待编辑的图片除了从电脑本地载入, 也可以读取你的摄像头(有小窗口弹出, 需要你同意). 由于所有的操作都在本地执行(没有一行服务端代码), 因此你的自拍照不会被