网站如何生成静态页面,做动图素材网站,备案过的网站换域名,极速网站建设canvas和napi-rs/canvas 可以用于在服务器端处理canvas图形,使用一个即可。
canvas安装方法#xff1a;https://github.com/Automattic/node-canvas/wiki/Installation:-Windows
napi-rs/canvas#xff0c;底层使用rust构建可以直接 npm安装。 npm i napi-rs/canvas 示例、…canvas和napi-rs/canvas 可以用于在服务器端处理canvas图形,使用一个即可。
canvas安装方法https://github.com/Automattic/node-canvas/wiki/Installation:-Windows
napi-rs/canvas底层使用rust构建可以直接 npm安装。 npm i napi-rs/canvas 示例、使用 echarts 和 canvas 库在 Node.js 环境下生成和保存图表图像, 并且通过本地打开操作系统默认图片查看器展示生成的图像。
import * as echarts from echarts;
// import {createCanvas} from napi-rs/canvas;
import {createCanvas} from canvas;
import fs from fs;
import {exec} from child_process;
// import { SVGRenderer, CanvasRenderer } from echarts/renderers;
// import _ from lodash;
// echarts.use([SVGRenderer, CanvasRenderer]);function renderChart(config) {const canvas createCanvas(config.width, config.height);const chart echarts.init(canvas);chart.setOption(config.option);let result;if (config.base64) {result canvas.toDataURL(config.formatType);} else {result canvas.toBuffer(config.formatType);}chart.dispose();return result;
}const option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: bar},{data: [120, 200, 150, 80, 70, 110, 130],type: bar},{data: [120, 200, 150, 80, 70, 110, 130],type: bar}]
};const mime {png: image/png,jpeg: image/jpeg,svg: image/svgxml,gif: image/gif,pdf: application/pdf
};// 方法一
let res renderChart({width: 800, height: 600, option, base64: false, formatType: mime.png});
// console.log(res);
fs.writeFileSync(./1.png, res);
exec(start ./1.png, (error, stdout, stderr) {if (error) {console.error(exec error: ${error});return;}if (stderr) {console.error(stderr: ${stderr});return;}console.log(stdout: ${stdout});
});// 方法二
res renderChart({width: 800, height: 600, option, base64: true, formatType: mime.png});
// console.log(res);
const base64Data res.replace(/^data:image\/png;base64,/, );
const buffer Buffer.from(base64Data, base64);
fs.writeFileSync(./2.png, buffer);
