Node.js中用merge-images配合canvas合并图片输出为空如何解决

算力阿峰

2026-9-27

错误原因

mergeImages 的then回调拿到的返回值是合并后图片的Base64编码字符串，你当前直接将存储Image实例的img变量赋值为该字符串，既没有触发画布绘制，也没有执行文件写入操作，本地的result.png自然不会被更新。
你提前创建Canvas、加载空白result.png的逻辑是多余的，merge-images库内部已经完成了合并所需的画布初始化、素材加载绘制逻辑，不需要自行实现这部分内容。

正确实现代码

const mergeImages = require('merge-images');
const { Canvas, Image } = require('canvas');
const fs = require('fs');
const path = require('path');

mergeImages([
  // 用path.resolve处理路径，避免相对路径出错
  path.resolve(__dirname, './lunas_parts/1.png'),
  path.resolve(__dirname, './lunas_parts/2.png'),
  path.resolve(__dirname, './lunas_parts/3.png')
], {
  Canvas: Canvas,
  Image: Image,
  // 直接指定合并后图片的宽高
  width: 2880,
  height: 2880
})
.then(b64 => {
  // 移除Base64前缀，转换为可写入的Buffer
  const imgBuffer = Buffer.from(b64.split(',')[1], 'base64');
  // 写入本地文件
  fs.writeFileSync(path.resolve(__dirname, './result.png'), imgBuffer);
})
.catch(err => {
  // 捕获并打印错误，方便定位问题
  console.error('图片合并失败：', err);
  throw err;
});