如何使用JavaScript合并身体部位图片生成NFT头像预览

核心用HTML5原生的Canvas API就能实现，不需要引入第三方依赖，具体实现逻辑和代码如下： #

前置要求 #

你所有的身体部位素材尺寸要完全一致，透明区域位置对齐，绘制时按照从底层到上层的顺序排列（比如先画身体、再画面部、再画眼睛配饰这类上层内容，避免遮挡）。

完整代码实现 #

HTML部分 #

<!-- 绘图用Canvas，宽高设置为和素材一致，这里示例用512*512，不需要显示可以加display:none -->
<canvas id="nftCanvas" width="512" height="512"></canvas>
<!-- 预览展示用的图片标签 -->
<img id="nftPreview" alt="NFT头像预览">

JavaScript部分 #

// 封装图片加载方法，确保图片加载完成再绘制
const loadImg = (src) => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    // 跨域素材需要打开下面注释，同时服务端配置CORS规则
    // img.crossOrigin = 'anonymous'
    img.src = src
    img.onload = () => resolve(img)
    img.onerror = (err) => reject(err)
  })
}

// 合并生成预览的主函数
async function mergeImages(partList) {
  const canvas = document.getElementById('nftCanvas')
  const ctx = canvas.getContext('2d')
  // 先清空画布内容
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  // 按传入顺序逐张绘制图层
  for(let partSrc of partList) {
    const img = await loadImg(partSrc)
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
  }

  // 转为png图片地址赋值给预览
  const previewSrc = canvas.toDataURL('image/png')
  document.getElementById('nftPreview').src = previewSrc
  // 有下载需求的话可以直接用previewSrc生成下载链接
  return previewSrc
}

// 调用示例：用户选择了强壮身体+蓝色眼睛
const userSelectedParts = [
  './images/body/strong_body.png',
  './images/eyes/blue_eyes.png'
]
mergeImages(userSelectedParts)

注意事项 #

• 绘制顺序一定要从最底层到最上层排列，顺序错了会出现上层内容被遮挡的问题
• 如果需要导出更高清的图片，可以把Canvas的width、height属性设置为展示尺寸的2-3倍，再用CSS控制显示大小即可
• 跨域存储的素材必须配置CORS，否则调用toDataURL时会报错无法导出图片

效果参考 #

#

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