如何在 JavaScript 中水平翻转图像答案

【问题标题】：How to horizontially flip a image in JavaScript如何在 JavaScript 中水平翻转图像
【发布时间】：2022-01-22 11:30:48
【问题描述】：

我正在尝试翻转从网络摄像头流中捕获的图像。 CSS 中的网络摄像头 view 被翻转，但是当我拍摄快照时，它直接从相机流中获取。我这样做是为了进行 OCR 识别。 (TesseractJS)

捕捉功能：

function captureSnapshot() {
  if (null != cameraStream) {
    var ctx = capture.getContext("2d");
    var img = new Image();

    ctx.drawImage(stream, 0, 0, capture.width, capture.height);

    img.src = capture.toDataURL("image/png");
    img.width = 240;

    snapshot.innerHTML = "";

    snapshot.appendChild(img);
  }
}

完整的 JavaScript

// The buttons to start & stop stream and to capture the image
var btnStart = document.getElementById("btn-start");
var btnStop = document.getElementById("btn-stop");
var btnCapture = document.getElementById("btn-capture");

// The stream & capture
var stream = document.getElementById("stream");
var capture = document.getElementById("capture");
var snapshot = document.getElementById("snapshot");

// The video stream
var cameraStream = null;

// Attach listeners
btnStart.addEventListener("click", startStreaming);
btnStop.addEventListener("click", stopStreaming);
// Start Streaming
function startStreaming() {
  var mediaSupport = "mediaDevices" in navigator;

  if (mediaSupport && null == cameraStream) {
    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then(function(mediaStream) {
        cameraStream = mediaStream;

        stream.srcObject = mediaStream;

        stream.play();
      })
      .catch(function(err) {
        console.log("Unable to access camera: " + err);
      });
  } else {
    alert("Your browser does not support media devices.");

    return;
  }
}
// Stop Streaming
function stopStreaming() {
  if (null != cameraStream) {
    var track = cameraStream.getTracks()[0];

    track.stop();
    stream.load();

    cameraStream = null;
  }
}
btnCapture.addEventListener("click", captureSnapshot);

function captureSnapshot() {
  if (null != cameraStream) {
    var ctx = capture.getContext("2d");
    var img = new Image();

    ctx.drawImage(stream, 0, 0, capture.width, capture.height);

    img.src = capture.toDataURL("image/png");
    img.width = 240;

    snapshot.innerHTML = "";

    snapshot.appendChild(img);
  }
}
function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(",")[1]);
  var mimeString = dataURI
    .split(",")[0]
    .split(":")[1]
    .split(";")[0];

  var buffer = new ArrayBuffer(byteString.length);
  var data = new DataView(buffer);

  for (var i = 0; i < byteString.length; i++) {
    data.setUint8(i, byteString.charCodeAt(i));
  }

  return new Blob([buffer], { type: mimeString });
}

function recognizeText(img) {
  Tesseract.recognize(
    "https://tesseract.projectnaptha.com/img/eng_bw.png",
    "eng",
    { logger: m => console.log(m) }
  ).then(({ data: { text } }) => {
    console.log(text);
  });
}

CSS Flip（我不知道这是否重要）：

video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

【问题讨论】：

这能回答你的问题吗？ How to horizontally flip an image
我看过了。我有一个 img 变量，设置为 png。我想操纵它。
我明白了。这也意味着建议的链接仍然相关。您仍然需要在翻转的画布上绘制图像。这不能用 CSS 完成。
你好像用画布所以在画布上翻转stackoverflow.com/questions/3129099/…

标签： javascript image ocr

【解决方案1】：

您下面的这段代码应该适用于 css。我建议在实例化图像时只向图像添加一个类。 css 中的那个类将使用下面的那个。

这是你尝试过的吗？

video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

【讨论】：

我说的是实际的 img JavaScript 对象。