如何借助含目标物体的PNG图像去除JPG图像的背景？

需求：有一张带透明背景的PNG图像（仅目标物体非透明），需要从另一张JPG图像中裁剪出对应区域，保存为新的PNG。

以下是用D3.js结合Canvas实现的方案：

let jpg = d3.select("#myJpg"); 
let png = d3.select("#myPng");

// 创建临时Canvas用于处理图像
const jpgCanvas = document.createElement('canvas');
const pngCanvas = document.createElement('canvas');
const jpgCtx = jpgCanvas.getContext('2d');
const pngCtx = pngCanvas.getContext('2d');

// 设置Canvas尺寸与图像一致
const imgWidth = png.node().width;
const imgHeight = png.node().height;
jpgCanvas.width = imgWidth;
jpgCanvas.height = imgHeight;
pngCanvas.width = imgWidth;
pngCanvas.height = imgHeight;

// 将图像绘制到Canvas
jpgCtx.drawImage(jpg.node(), 0, 0);
pngCtx.drawImage(png.node(), 0, 0);

// 获取PNG图像的像素数据
const pngImageData = pngCtx.getImageData(0, 0, imgWidth, imgHeight);
const data = pngImageData.data;

// 计算非透明区域的边界
let minX = imgWidth, maxX = 0;
let minY = imgHeight, maxY = 0;

for (let y = 0; y < imgHeight; y++) {
  for (let x = 0; x < imgWidth; x++) {
    // 每个像素的alpha通道索引（RGBA的第四个值）
    const alphaIndex = (y * imgWidth + x) * 4 + 3;
    if (data[alphaIndex] > 0) { // 非透明像素
      minX = Math.min(minX, x);
      maxX = Math.max(maxX, x);
      minY = Math.min(minY, y);
      maxY = Math.max(maxY, y);
    }
  }
}

// 计算裁剪区域的宽高
const cropWidth = maxX - minX + 1;
const cropHeight = maxY - minY + 1;

// 创建裁剪后的Canvas
const cropCanvas = document.createElement('canvas');
const cropCtx = cropCanvas.getContext('2d');
cropCanvas.width = cropWidth;
cropCanvas.height = cropHeight;

// 从JPG图像中裁剪对应区域
cropCtx.drawImage(
  jpgCanvas,
  minX, minY, cropWidth, cropHeight, // 源图像的裁剪区域
  0, 0, cropWidth, cropHeight        // 目标Canvas的绘制位置
);

// 将裁剪后的图像导出为PNG
const pngUrl = cropCanvas.toDataURL('image/png');
// 创建下载链接让用户保存
const downloadLink = document.createElement('a');
downloadLink.href = pngUrl;
downloadLink.download = 'cropped-image.png';
downloadLink.click();

说明： #

• 先将两张图像绘制到Canvas，才能读取和操作像素数据
• 通过遍历PNG的像素alpha通道，确定非透明区域的边界范围
• 利用Canvas的drawImage方法完成裁剪，最后通过toDataURL导出PNG格式

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