在 JS 中合并网络摄像头视频和 canvas 绘图

Question

我正在尝试合并网络摄像头视频和 canvas 绘图并保存到图像文件。 它有效，但视频图像覆盖 canvas 驱动。 我试图交换位置 context.drawImage 但仍然相同。 有任何想法吗？ :)

canvas.addEventListener("click", async function () {
    var context = canvas.getContext("2d");
    context.drawImage(video, 0, 0, canvas.width / 1.5, canvas.height / 1.5);
    context.drawImage(canvas, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL("image/png");
    $.ajax({
      type: "POST",
      url: "./upload.php",
      data: {
        dataURL: dataURL
      }
    });
  });

Answer 1

目前，您的代码所做的是在其自身上绘制 canvas，视频已经绘制在其上。
您可以使用globalCompositeOperation = "destination-over"在现有内容后面绘制。

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.font = "16px sans-serif"; ctx.textAlign = "center"; const img = new Image(); // a video is the same img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"; img.decode().then(() => { canvas.onclick = (evt) => { ctx.globalCompositeOperation = "destination-over"; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // reset to default ctx.globalCompositeOperation = "source-over"; }; ctx.fillText("click on the canvas", canvas.width / 2, canvas.height / 3); ctx.fillText("to draw the image", canvas.width / 2, canvas.height / 3 + 20); ctx.fillText("behind this text", canvas.width / 2, canvas.height / 3 + 40); });

 canvas { outline: 1px solid }

 <canvas></canvas>