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?
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