即使在设置 [mirrorImage]="'always'" 之后，ngx-webcam 也不会提供像镜像一样的图像

Question

我正在尝试使用 ngx-webcam 集成自拍图像上传。

我想要镜像中的图像。为此我设置了

    [mirrorImage]="'always'"

    [mirrorImage]="'auto'"

    [mirrorImage]="'never'"

但是在拍摄的照片上，右手在用户的左边，不像镜子

但我想像镜像一样上传到服务器

经过大量搜索，我发现此链接提到

https://github.com/basst314/ngx-webcam/issues/61

同样的问题。 我使用以下代码编辑了 nodemodules 文件夹中的 webcam.component.mjs 文件

    // const context2d = _canvas.getContext('2d');
    // context2d.drawImage(_video, 0, 0);
    const context2d = _canvas.getContext('2d');
    context2d.save();
    context2d.scale(-1, 1);
    context2d.drawImage(_video, _canvas.width * -1, 0, _canvas.width, _canvas.height);
    context2d.restore();

但我仍然无法实现我的目标。

我应该怎么做才能使用 ngx-webcam 获得像镜像一样的图像？

Answer 1

如果您想水平旋转图像，只需使用 javascript 即可轻松实现

从 ngx-webcam 接收网络摄像头图像

调用翻转 function 旋转图像

生成的翻转图像将基于 64

flippedImage:any;
  handleImage(webcamImage: WebcamImage) {
    console.log(webcamImage);
    this.flip(webcamImage.imageAsDataUrl)

  }
  flip(src:any){
    const img = new Image();
    img.onload = ()=>{
     var c = document.createElement('canvas');
     c.width = img.width;
     c.height = img.height;
     var ctx = c.getContext('2d');
     ctx.scale(-1,1);
     ctx.drawImage(img,-img.width,0);
     img.onload = undefined; 
     const flippedImage = c.toDataURL();
     this.flippedImage=flippedImage;
    }
    img.src = src;
   }

stackblitz 演示https://ngx-webcam-image-flipping.stackblitz.io