When taking pictures with the front camera, the image is reversed from side to side.

For example, if you take a picture of your face with the front camera, the preview screen before opening the shutter and the photo data after taking a picture will be reversed from side to side.
How can I take a picture in the direction shown on the screen before I turn off the shutter?

monaca cordova

2022-09-30 19:50

1 Answers

Since it's monaca, do you mean that you start a camera application that is standard for smartphones from your own application?
These camera apps often display mirror images in previews when taking selfies (using the front camera).
It will be inconvenient for users if they show correct images (as seen by others) instead of mirror images.
This is because adjusting the position of the camera and setting the hair is surprisingly difficult without a mirror image.

(The above is common, but just in case)

Now, you want to mirror the results of the shooting, but there may be another common method in monaca cordova, but I will show you how to use web technology.

The simple thing is to mirror image the image data only when it is displayed without fiddling with it.CSS can only be done with transform:scaleX(-1);.

If you want mirror images as data, using canvas is the shortcut.You can get base64 image data from toDataURL after you mess with it.

varsrc="data:image/png;base64,"+
"iVBORw0KGgoAAAAAANSUhEugAAAAAAAAAAAAAwCAMAABg3Am1AAAABLBMVEX//8AAABVwtN + AAAACXBI" +
"WXMAAC4jAAAuIwF4pT92AAAAAwElEQVR4nO2VwQ7DMAhD8f//9C5NhoNNkTrtVE4L9ooOUTbicQB4" +
"AWdC+i0wOuOKr0SJ07DglVgalbiKcLMEnJXAZ91JJtRz0d2FrQdgxpzHMACwxzADjtK3gJgiSxVo"+
"HjoaIN3MtTyvrv9YWprtpCntVN6lcqZVOba1nN8YxWhs4rUBLUfaA/ZTztcDBCFVBdR9U1pJOtUB"+
"ttyvgMmFcypr9y1iAIT0d0Aof/maKIJkBUSNBhBut4fObdr/++3yAVRHAvzFitZIAAAAAAelFTkSu"+
"QmCC".

varimg = new Image();
img.onload=function(){
	varcc=mirror_by_canvas.getContext('2d');
	cc.translate (48,0);
	cc.scale(-1,1);
	cc.drawImage(img,0,0);
	mirror_data.href = mirror_by_canvas.toDataURL();
}

origin.src=mirror_by_css.src=img.src=src;

#mirror_by_css{
	transform —scaleX(-1);
}
img,canvas{
	border-style:solid;
	border-color: darkblue;
	width —48px;
	height: 48px;
}

<p>
	<img id="orig"/>
	original
</p>
<p>
	<img id="mirror_by_css"/>
	CSS transform to mirror image
</p>
<p>
	<canvas id="mirror_by_canvas" width="48" height="48">/canvas>
	mirror image with canvas
	<aid="mirror_data" download="mirror_abc.png">Link to generated image data</a>
</p>

2022-09-30 19:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656