From 12b7fc1bc6631f0b05d709f7501b6ac3c53782f1 Mon Sep 17 00:00:00 2001 From: ZJU_czx <952370295@qq.com> Date: Tue, 3 Dec 2024 15:23:13 +0800 Subject: [PATCH 1/2] feat(docs): update export video/gif docs --- docs/assets/guide/en/Getting_Started.md | 56 +++++++++++++++++++------ docs/assets/guide/zh/Getting_Started.md | 51 ++++++++++++++++++---- 2 files changed, 86 insertions(+), 21 deletions(-) diff --git a/docs/assets/guide/en/Getting_Started.md b/docs/assets/guide/en/Getting_Started.md index 74407f83..44794190 100644 --- a/docs/assets/guide/en/Getting_Started.md +++ b/docs/assets/guide/en/Getting_Started.md @@ -184,24 +184,56 @@ The generated chart is as follows: ## Export GIF and Video VMind supports exporting the generated chart as a GIF animation and video, which can be shared anytime and anywhere. -In order to implement the video export function, you need to additionally introduce VChart and FFMPEG into the project and pass them in as objects to VMind. The following will show how to get the ObjectURL of the chart GIF and video: +In order to implement the video export function,you need to additionally include VChart, FFMPEG, canvas related content in your project and pass them as objects to VMind. The following will show how to get the ObjectURL of the chart GIF and video: -First install VChart and FFMPEG: +First, install VChart, FFMPEG, and canvas-related content: ```bash # Install with npm npm install @visactor/vchart -npm install @ffmpeg/ffmpeg -npm install @ffmpeg/util +npm install @visactor/vrender-core +npm install @ffmpeg/ffmpeg^0.11.6 +npm install canvas^2.11.2 ``` - +Ensure that the vrender-core version matches the vchart dependency version, for example: `"@visactor/vchart": "1.12.7"` should correspond to `"@visactor/vrender-core": "0.20.7"`. +Usage is as follows: ```typescript -import VChart from '@visactor/vchart'; -import { FFmpeg } from "@ffmpeg/ffmpeg"; -import { fetchFile } from "@ffmpeg/util"; -//Export video -const videoSrc = await vmind.exportVideo(spec, time, VChart, FFmpeg, fetchFile); //Pass in chart spec and video duration, return ObjectURL -//Export GIF image -const gifSrc = await vmind.exportGIF(spec, time, VChart, FFmpeg, fetchFile); //Pass in chart spec and GIF duration, return ObjectURL +import VChart from "@visactor/vchart"; +import { ManualTicker, defaultTimeline } from "@visactor/vrender-core"; +import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js' +import { createCanvas } from "canvas"; +import VMind from "@visactor/vmind"; + +// Initialize vmind and ffmpeg +const vmind = new VMind({}); +const ffmpeg = createFFmpeg({ + log: true, +}); +const loadFFmpeg = async () => { + if (!ffmpeg.isLoaded()) { + await ffmpeg.load(); + } +}; +// Ensure ffmpeg is loaded before using the export feature +await loadFFmpeg(); +// Export video +// Pass in the chart spec, video duration, and necessary parameters for video creation, and return the ObjectURL +const videoSrc = await vmind.exportVideo(spec, time, { + VChart, + FFmpeg: ffmpeg, + fetchFile, + ManualTicker, + defaultTimeline, + createCanvas, + }); +// Export GIF image +const gifSrc = await vmind.exportGIF(spec, time, { + VChart, + FFmpeg: ffmpeg, + fetchFile, + ManualTicker, + defaultTimeline, + createCanvas + }); ``` Once you get the ObjectURL of the chart, we can save it as a file. Take saving the video file as an example: diff --git a/docs/assets/guide/zh/Getting_Started.md b/docs/assets/guide/zh/Getting_Started.md index 7d2ca604..bf16d9b2 100644 --- a/docs/assets/guide/zh/Getting_Started.md +++ b/docs/assets/guide/zh/Getting_Started.md @@ -184,24 +184,57 @@ const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset) ## 导出 GIF 和视频 VMind 支持将生成的图表导出为 GIF 格式的动画和视频，随时随地进行分享。 -为了实现视频导出功能，你需要在项目中额外引入VChart和FFMPEG，并将其作为对象传入VMind。下面将展示如何获得图表 GIF 和视频的 ObjectURL： +为了实现视频导出功能，你需要在项目中额外引入`VChart, FFMPEG, canvas`相关内容，并将其作为对象传入VMind。下面将展示如何获得图表 GIF 和视频的 ObjectURL： -首先安装VChart和FFMPEG： +首先安装VChart,FFMPEG以及canvas相关内容： ```bash # 使用 npm 安装 npm install @visactor/vchart -npm install @ffmpeg/ffmpeg -npm install @ffmpeg/util +npm install @visactor/vrender-core +npm install @ffmpeg/ffmpeg^0.11.6 +npm install canvas^2.11.2 ``` +同时确保vrender-core版本与vchart依赖版本一致，如：`"@visactor/vchart": "1.12.7"`对应的版本应该为，`"@visactor/vrender-core": "0.20.7"` +具体使用如下： ```typescript -import VChart from '@visactor/vchart'; -import { FFmpeg } from "@ffmpeg/ffmpeg"; -import { fetchFile } from "@ffmpeg/util"; +import VChart from "@visactor/vchart"; +import { ManualTicker, defaultTimeline } from "@visactor/vrender-core"; +import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js' +import { createCanvas } from "canvas"; +import VMind from "@visactor/vmind"; + +// 初始化vmind和ffmpeg +const vmind = new VMind({}); +const ffmpeg = createFFmpeg({ + log: true, +}); +const loadFFmpeg = async () => { + if (!ffmpeg.isLoaded()) { + await ffmpeg.load(); + } +}; +// 确保在使用导出功能前已经加载了ffmpeg +await loadFFmpeg(); //导出视频 -const videoSrc = await vmind.exportVideo(spec, time, VChart, FFmpeg, fetchFile); //传入图表spec和视频时长，返回ObjectURL +//传入图表spec，视频时长和视频化必要参数，返回ObjectURL +const videoSrc = await vmind.exportVideo(spec, time, { + VChart, + FFmpeg: ffmpeg, + fetchFile, + ManualTicker, + defaultTimeline, + createCanvas, + }); //导出GIF图片 -const gifSrc = await vmind.exportGIF(spec, time, VChart, FFmpeg, fetchFile); //传入图表spec和GIF时长，返回ObjectURL +const gifSrc = await vmind.exportGIF(spec, time, { + VChart, + FFmpeg: ffmpeg, + fetchFile, + ManualTicker, + defaultTimeline, + createCanvas + }); ``` 一旦获得图表的 ObjectURL，我们可以将其保存为文件。以保存视频文件为例： From f8b95895bfae0e2536131dc871365e72f8572422 Mon Sep 17 00:00:00 2001 From: ZJU_czx <952370295@qq.com> Date: Tue, 3 Dec 2024 15:29:06 +0800 Subject: [PATCH 2/2] feat(docs): fix space wrong in en docs --- docs/assets/guide/en/Getting_Started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets/guide/en/Getting_Started.md b/docs/assets/guide/en/Getting_Started.md index 44794190..2752f088 100644 --- a/docs/assets/guide/en/Getting_Started.md +++ b/docs/assets/guide/en/Getting_Started.md @@ -184,7 +184,7 @@ The generated chart is as follows: ## Export GIF and Video VMind supports exporting the generated chart as a GIF animation and video, which can be shared anytime and anywhere. -In order to implement the video export function,you need to additionally include VChart, FFMPEG, canvas related content in your project and pass them as objects to VMind. The following will show how to get the ObjectURL of the chart GIF and video: +In order to implement the video export function, you need to additionally include VChart, FFMPEG, canvas related content in your project and pass them as objects to VMind. The following will show how to get the ObjectURL of the chart GIF and video: First, install VChart, FFMPEG, and canvas-related content: ```bash