web 端滤镜 sdk

本项目通过 emscripten 打包了 illusion-engine，提供更快更稳定的 web 滤镜渲染 sdk

模块介绍

本项目根据 illusion-engine 的模块划分，将渲染库分为以下模块：

• Engine(渲染引擎主模块，负责渲染引擎的声明周期控制与自模块的创建)
• Layer(图层, 是包括数据源、处理效果以及自身如变换等多数据的载体)
• Source(数据源, 目前为渲染的输入图像数据)
• Filter(滤镜, 图层渲染使用到的滤镜、混合效果等)
• Target(渲染目标, 渲染结果输出的目标, 在 web 中为引擎挂载的 canvas)

快速使用

import { installIllusionEngine } from '@gaoding/illusion-sdk';

installIllusionEngine({
    useWorker: false
})
    .then(async(engine) => {
        await engine.init();

        // 创建视图源
        const source = await engine.createSource();
        await source.setPixelsFromUrl(imageUrl);

        // 创建滤镜
        const filters = await engine.createFiltersByZip(zipDataBuffer);

        // 创建图层
        const layer = await engine.createLayer();
        await layer.setSource(source);
        await Promise.all(filters.map(async(filter) => {
            await layer.addEffect(filter);
        }));

        await engine.addLayer(layer);

        // 创建目标视图
        const target = await engine.createTarget('canvasId', 500, 500);
        await engine.prepare(target);

        engine.submit(0);
    });

如何编译

安装 emsdk

可以参考 emscripten 的官方文档

本项目开发使用版本为 1.39.19

git clone https://github.com/emscripten-core/emsdk.git

cd emsdk

./emsdk install 1.39.19

source /env/emsdk_env.sh

注意: emsdk 在安装时会从 googlesource 上下载版本镜像，所以最好设置 HTTP_PROXY 进行翻墙与加速

安装依赖项

yarn install

编译 webassembly

yarn build:sdk

编译 sdk

yarn buid

运行单元测试

yarn test

运行 demo

···bash yarn dev ···