Я хочу открыть предварительный просмотр камеры внутри содержащего элемента div, представляющего собой прямоугольник, и сделать снимок всего, что видно внутри предварительного просмотра камеры.
Я использовал метод CameraPreview.startCamera
(см. Метод ниже), чтобы получить startCamera
точный прямоугольник, чтобы открыть камеру.И все работает нормально и открываю камеру в div точно так, как я хотел.
Но когда я делаю снимок (см. Ниже: cameraPreview.takePicture
), я вижу, что камера захватила содержимое вне заданного прямоугольника вдоль оси Y .
Интересно, что вдоль оси X изображение имеет только содержимое, которое находилось внутри прямоугольника во время съемки, как и ожидалось.
Я прилагаю свое изображение и код ниже.
Любая помощь будет принята с благодарностью!
Изображение 1 ниже: предварительный просмотр камеры внутрисодержит div.
Изображение 2 ниже: фактическое изображение, снятое при предварительном просмотре с камеры, и то, что я действительно ожидал:
Я использую следующий код, чтобы открыть камеру в режиме предварительного просмотра и сделать снимок:
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
}
);
}
}