javascriptangularwebcamwebcam-capture

ngx-webcam not giving mirror like images even after setting [mirrorImage]="'always'"


Iam trying to integrate selfie image upload using ngx-webcam.

i want the image as in mirror.for that i set

    [mirrorImage]="'always'"

    [mirrorImage]="'auto'"

    [mirrorImage]="'never'"

but on the captured picture the right hand is on left of user unlike mirror

but i want mirror like image to upload to server

after lot of searching i found this link mentioning

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

the same issue. i edited the webcam.component.mjs file within the nodemodules folder with below code

    // 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();

but still iam not able to achieve my goal.

what should i do to get mirror like images using ngx-webcam?


Solution

  • if you want to rotate the image horizontally you can acheive this easily using javascript only

    On receiving webcam image from ngx-webcam

    call the flip function to rotate the image

    the resulting flipped image will be based64

      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 demo https://ngx-webcam-image-flipping.stackblitz.io