使用npm Canvas库在for循环内调用drawImage无绘制效果如何解决

问题原因分析 #

1. 异步时序错误
   你当前的Canvas.loadImage是异步方法，所有图片加载完成后执行drawImage的逻辑属于微任务，会在所有同步代码执行完成后才触发。如果你是在循环结束后直接执行canvas保存操作，此时所有drawImage都尚未执行，保存的自然是空画布。
2. 坐标超出可视范围
   utils.chessLetter和utils.chessNo返回的坐标值如果超出了你初始化的canvas宽高范围，绘制的内容会落在可视区域外，无法显示。
3. canvas初始化参数错误
   如果初始化canvas时宽高设置为0或者过小，也会导致绘制内容无法显示。

解决方案 #

1. 处理异步时序，等待所有绘制完成后再保存

将所有图片加载的Promise收集到数组中，使用Promise.all等待全部绘制任务完成后再执行保存操作，示例代码如下：

const canvas = require('canvas')
const path = require('path')
const fs = require('fs')

// 请先确认你初始化的canvas宽高足够容纳所有棋子，示例按8*8个170px的棋子计算，宽高设为1360px
const myCanvas = canvas.createCanvas(1360, 1360)
const ctx = myCanvas.getContext('2d')

const chessLettersArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
const drawTasks = [] // 收集所有绘制任务

for (const letter of chessLettersArr) {
  for (let i = 0; i < 8; i++) {
    if (row[i][letter] !== '-') {
      const drawTask = canvas.loadImage(path.join(__dirname, `../images/chesspieces/${row[i][letter]}.png`))
        .then((image) => { 
          const x = utils.chessLetter(letter)
          const y = utils.chessNo(row[i].number.toString())
          // 可打印坐标确认是否在canvas宽高范围内
          console.log('绘制坐标：', x, y)
          ctx.drawImage(image, x, y, 170, 170)
        })
      drawTasks.push(drawTask)
    }
  }
}

// 所有绘制完成后再保存图片
Promise.all(drawTasks).then(() => {
  const outputPath = path.join(__dirname, '../output.png')
  const outStream = fs.createWriteStream(outputPath)
  const pngStream = myCanvas.createPNGStream()
  pngStream.pipe(outStream)
  outStream.on('finish', () => {
    console.log('图片保存成功，路径：', outputPath)
  })
}).catch(err => {
  console.error('绘制出错：', err)
})

2. 排查坐标与canvas配置

• 先写死坐标x=0, y=0绘制单张图片，确认绘制逻辑本身可以正常输出内容
• 检查工具函数返回的坐标值是否在canvas宽高范围内
• 确认加载的棋子图片本身不是完全透明的空资源

内容的提问来源于stack exchange，提问作者Stodgy