时间戳

首页 > 解决方案 > 如何在画布上翻转网络摄像头视频而不反转画布中写的文本

javascript - 如何在画布上翻转网络摄像头视频而不反转画布中写的文本

问题描述

我翻转了一个网络摄像头流以使其镜像使用ctx.translate()，ctx.scale()但它也翻转了画布上绘制的所有其他内容。有没有办法翻转网络摄像头视频，但不能翻转画布上的其他绘图，如文本？

这是我目前正在使用的代码（摘录）：

const setupcamera = () => {
  navigator.mediaDevices
    .getUserMedia({
      video: { width: 600, height: 400 },
      audio: false,
    })
    .then((stream) => {
      video.srcObject = stream;
    });
};

const detectpose = async () => {
  const poses = await detector.estimatePoses(video, false);

  console.log(poses);
  ctx.drawImage(video, 0, 0, 600, 400);

  ctx.font = "30px Comic Sans MS";
    ctx.fillStyle = "green";
    ctx.fillText(po, elbowx, elbowy);

setupcamera();

video.addEventListener("loadeddata", async () => {
  ctx.translate(600, 0);
  ctx.scale(-1, 1);
  detector = await poseDetection.createDetector(
    poseDetection.SupportedModels.MoveNet
  );
  setInterval(detectpose, 20);
});

我想在翻转的画布上画一个新的画布，但如果可能的话，我想在同一个画布上画出所有东西。

标签： javascripthtml5-canvasdraw

解决方案

您需要在绘图期间更新上下文的矩阵变换。
首先缩放和翻译上下文，然后绘制视频，在此处重置上下文矩阵，然后最终绘制文本。

// using a video file because SO can't use gUM
const video = document.createElement("video");
video.muted = true;
video.crossOrigin = "anonymous";
video.src = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";

// when available video.requestVideoFrameCallback is the best
const requestFrame = (cb) => {
  if(video.requestVideoFrameCallback) {
    return video.requestVideoFrameCallback(cb);
  }
  return requestAnimationFrame(cb);
};
video.play().then(() => {
  const canvas = document.querySelector("canvas");
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext("2d");
  ctx.font = "800 90px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = "green";
  
  requestFrame(draw);

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // vertical-flip
    ctx.scale(1, -1);
    ctx.translate(0, -canvas.height);
    ctx.drawImage(video, 0, 0);
    // reset the transform-matrix
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.fillText("Some text", canvas.width / 2, canvas.height / 2);
    requestFrame(draw);
  }
}).catch(console.error);
canvas { max-height: 100vh }
<canvas></canvas>

推荐阅读