I want to open camera preview inside a containing div, which is a rectangle and take picture of whatever is visible inside the camera preview.
I used CameraPreview.startCamera method (see method below) to give startCamera exact rectangle to open camera. And it works fine and open camera in the div exactly as I wanted.
But when I take picture (see below: cameraPreview.takePicture ), I see that camera has captured the content outside of given rectangle along Y-axis .
Interestingly, along X-axis picture only has content which was inside the rectagle at the time of taking picture, as expected.
I am attaching my the relevent picture and the code below.
I am attaching two pictures and my code.
Any help will be greatly appreciated!
**Image 1 below: camera preview inside containing div.**
**Image 2 below: Actual image taken by camera preview and what was I actually expecting:**
I use the following code to open camera in preview and take the picture:
export class CameraService {
constructor(private camera: Camera,
private platform: Platform,
private cameraPreview: CameraPreview) {
}
takePicture(div) {
return this.cameraPreview.takePicture();
}
startCamera(div?) {
let rectangle = div.getBoundingClientRect();
let x = rectangle.x;
let y = rectangle.y;
let width = rectangle.width;
let height = rectangle.height;
let tapEnabled: any = false;
let dragEnabled: any = false;
// let toBack: any = true;
let alpha = 1;
let rect: any = {
x: x || 250,
y: y || 250,
width: width || this.platform.width(),
height: height || this.platform.height()
};
console.log(rect);
this.cameraPreview.startCamera(
{
...rect,
toBack: true,
tapEnabled,
dragEnabled,
previewDrag: true,
alpha
}
);
}
}