photon浏览器_支持 WebAssembly 的高性能图片处理库 Photon 简介

作为一枚前端，也经常可能会遇到处理图片的问题，大部分场景应该是图片裁切了，一般 CMS 或者用户登录系统都会有。如果遇到一些专门的图片分享站点，则需要用到的功能会更多一些。

但是在之前，这种图片处理的事情一般是交给后端服务器去处理，前端一般只展示 UI 和提供必要的参数，这样不但速度上有影响，而且需要消耗服务器性能。

今天给大家分享一个基于 Rust 的高性能图片处理库：Photon，它同时支持在 Native(通过 Rust)、Node 和 Web 环境中使用，而且在 Web 上通过 WebAssembly 实现，性能优势明显。

长按图片识别二维码进入官方站点

主要特性

• 高性能：和现有的 ImageMagick、Python Image Library 等实现比起来，性能优势非常明显，见下方截图对比

• 安全可靠：基于 Rust 实现，有效避免内存泄露

• 功能齐全：支持超过 80 种图片处理效果

• 同时支持浏览器和本地使用

• 跨平台

性能对比

图片处理特性

• 变形：支持裁切，大小调整，翻转，旋转等变形处理

• 滤镜

• 通道调整：修改通道创建新色彩图片，实现通道相关的效果

• 特殊效果：支持超过 20 种特殊效果

• 修正：支持锐化、调亮、调暗、饱和度、颜色修正

在 Web 使用示例

通过 npm 安装即可在 JS 项目中使用：

npm install @silvia-odwyer/photon

导入

import("@silvia-odwyer/photon").then(photon => {    // 模块导入成功，具体处理示例见下方 }

Photon 需要使用 HTML5 的 Canvas 元素渲染图片，因此首先要创建一个 Canvas 并将需要处理的图片渲染到画布上，然后将 canvas 转换为 PhotonImage 对象并进行相应处理

function filterImage() {    // Create a canvas and get a 2D context from the canvas    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    // Draw the image element onto the canvas    ctx.drawImage(newimg, 0, 0);    // Convert the ImageData found in the canvas to a PhotonImage (so that it can communicate with the core Rust library)    let image = photon.open_image(canvas, ctx);    // Filter the image, the PhotonImage's raw pixels are modified    photon.filter(image, "radio");    // Place the modified image back on the canvas    photon.putImageData(canvas, ctx, rust_image);}

图片处理是一个 WebAssembly 应用的典型场景，随着 WebAssembly 的标准化及浏览器的广泛支持，相信会有越来越多的 WebAssembly 发挥优势的应用场景出现，为 Web 应用带来更加良好的体验。

鼓励一下，点个赞吧 ⬇️