Node.js节点画布显示base64图像

npm install canvas

const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');

// 从Base64编码的字符串中解码图像数据
function decodeBase64Image(base64Image) {
  const base64Data = base64Image.replace(/^data:image\/png;base64,/, '');
  const buffer = Buffer.from(base64Data, 'base64');
  return buffer;
}

// 将Base64编码的图像绘制到画布上
async function drawBase64ImageOnCanvas(base64Image, outputPath) {
  // 解码Base64图像数据
  const imageData = decodeBase64Image(base64Image);

  // 创建画布
  const canvas = createCanvas(256, 256);
  const ctx = canvas.getContext('2d');

  // 加载图像数据
  const image = await loadImage(imageData);

  // 将图像绘制到画布上
  ctx.drawImage(image, 0, 0);

  // 将画布内容转换为PNG格式并写入文件
  const buffer = canvas.toBuffer('image/png');
  fs.writeFileSync(outputPath, buffer);
}

// 示例：将Base64编码的图像绘制到画布并保存为PNG文件
const base64Image = 'data:image/png;base64,iVBORw0KG...'; // 替换为你的Base64编码的图像数据
const outputPath = 'output.png';

drawBase64ImageOnCanvas(base64Image, outputPath)
  .then(() => console.log('Image saved to', outputPath))
  .catch((err) => console.error('Failed to draw image:', err));