JavaScript中从背景上下文裁剪base64格式图像的实现咨询

• 运行环境：JavaScript
• 核心目标：将示例图中的形状从背景画布中裁剪分离提取
• 当前卡点：已知图像为base64编码格式，不清楚JavaScript环境下如何将base64图像转为可操作的二进制数据，支撑后续裁剪逻辑

实现方案 #

Base64图像转二进制像素数据的操作流程 #

• 基于浏览器原生API即可完成转换，无需依赖第三方库
• 转换得到的二进制数据为标准ImageData结构，逐像素存储RGBA通道值，可直接用于背景分离、形状裁剪操作

核心实现代码 #

// 读取base64图像的二进制像素数据
async function readBinaryImage(base64Data) {
  const img = new Image()
  // 等待图片资源加载完成
  await new Promise((resolve, reject) => {
    img.onload = resolve
    img.onerror = reject
    img.src = base64Data
  })
  // 创建离屏画布完成图像绘制
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0)
  // 返回可直接操作的二进制像素矩阵
  return ctx.getImageData(0, 0, canvas.width, canvas.height)
}

后续裁剪操作 #

拿到上述二进制像素矩阵后，逐行遍历像素点，将与背景色通道值匹配的像素alpha通道值设为0，即可完成目标形状的裁剪提取。

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