How to render on offscreen-canvas

sheepbox8646 commented 1 month ago

首先，我很开心能找到这个项目

Remotion有一个包基于react-native-skia封装了一些做视频用的组件：

https://www.remotion.dev/docs/skia/skia-canvas

而我们团队正在开发一个叫VueMotion(https://github.com/Bug-Duck/vuemotion)的动画引擎，准备集成入Skia, 最初方案是CanvasKit-WASM, 但是如果封装下去工程量会非常大，所以我无意间搜索到了vue-skia

但是我研究了一下发现无法渲染到离屏画布上, 请问有什么解决方案？如果没有的话，我觉得可以封装类似于以下的API:

<script setup>
// ...
const ele = ref(null)
const { surface }  = useOffscreenCanvas(ele) 
// ...
</script>
<template>
<template>
  <v-surface ref="ele">
    ...
  </v-surface>
</template>
</template>

最终的需求是获取到图片的Blob对象。

如果看到了麻烦看一眼，谢谢！！！！！！！！！qwq

meloalright commented 1 month ago

感谢关注！

这是一个很有酷的问题🤔 确实 vue-skia 没有很关注渲染到离屏画布的问题不过如果只是想得到图片的位图理论上是可以通过 soft-skia-wasm 进行组合的

vue-skia 的 WASM FFI 层是通过 soft-skia-wasm 进行桥接的 (文件路径: https://github.com/rustq/vue-skia/tree/main/soft-skia-wasm)

不过我最近正在休假我最近想一想这个问题争取早些回复~

meloalright commented 1 month ago

soft-skia-wasm 确实木有去涉及获取 blob 文件的读取也不涉及浏览器画布或者离屏画布的渲染

不过可以试试这个例子 https://codesandbox.io/p/sandbox/fqv8zs

这个例子通过 soft-skia-wasm 的 WASM FFI API 进行组合直接 log 内存中光栅结果的 base64 值

rustq / vue-skia

How to render on offscreen-canvas #46