JS中合并摄像头视频与Canvas绘图时视频覆盖绘图的解决方法

你的问题核心是调用drawImage(canvas)时，主Canvas已经被视频画面覆盖——先画视频会直接覆盖掉Canvas上原有的绘图，之后再把当前Canvas（已经只剩视频画面了）画上去，自然看不到原来的绘图内容。

解决思路是先把Canvas上原有的绘图暂存，再按需要的层级重新绘制：

canvas.addEventListener("click", async function () {
  const ctx = canvas.getContext("2d");
  
  // 1. 创建临时Canvas，保存当前Canvas的原有绘图
  const tempCanvas = document.createElement("canvas");
  tempCanvas.width = canvas.width;
  tempCanvas.height = canvas.height;
  const tempCtx = tempCanvas.getContext("2d");
  tempCtx.drawImage(canvas, 0, 0);
  
  // 2. 先绘制视频作为底层
  ctx.drawImage(video, 0, 0, canvas.width / 1.5, canvas.height / 1.5);
  
  // 3. 把暂存的绘图叠加到视频上方
  ctx.drawImage(tempCanvas, 0, 0);
  
  // 4. 生成图片并上传
  const dataURL = canvas.toDataURL("image/png");
  $.ajax({
    type: "POST",
    url: "./upload.php",
    data: {
      dataURL: dataURL
    }
  });
});

如果你的需求是视频在绘图上方，只需要调换步骤2和3的顺序：先画暂存的绘图，再画视频即可。

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