如何在 JavaScript 中水平翻转图像

Posted 2023-04-17

【中文标题】如何在 JavaScript 中水平翻转图像

【英文标题】：How to horizontially flip a image in 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 完成。

你好像用画布所以在画布上翻转***.com/questions/3129099/…

【参考方案1】：

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

这是你尝试过的吗？

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

【讨论】：

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