在nodejs环境里使用canvas和sharp生成图片

原创

navysummer 2024-01-02 10:56:13 ©著作权

文章标签 Data 运行测试 Image 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者navysummer的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.安装依赖包

npm install sharp canvas

2.实例代码

const {createCanvas} = require('canvas');

// 在虚拟DOM环境中创建Canvas
const canvas = createCanvas(300, 200);
const context = canvas.getContext('2d');

// 在Canvas上绘制一些内容（这里绘制一个简单的红色矩形）
context.fillStyle = 'red';
context.fillRect(0, 0, 300, 200);

// 从Canvas获取Data URL
const dataUrl = canvas.toDataURL('image/png');

console.log('Data URL:', dataUrl);

// 可以将Data URL传递给其他地方进行处理，比如使用Sharp库转换为图像
// 以下是一个使用Sharp的示例
const sharp = require('sharp');

sharp(Buffer.from(dataUrl.split(',')[1], 'base64'))
    .toFile('output.png', (err, info) => {
        if (err) {
            console.error(err);
        } else {
            console.log('Image saved:', info);
        }
    });

3.运行测试