Я использую nativescript v.4.2 вместе с "@ nstudio / nativescript-camera-plus": "^ 2.0.2".
У меня есть общий код, который скопирован с демонстрационной страницы репозитория плагина камеры. Я не публикую свой код, так как проблема в другом - у меня нет проблем с захватом изображений и т. Д., Но я заметил, что у плагина есть проблемы с ориентацией экрана. Если вы запускаете страницу в портретном режиме и поворачиваете устройство, камера становится меньше и выглядит как ошибка.
Итак, я удалил опцию, чтобы повернуть устройство в info.plist, удалив:
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
Теперь камера выглядит хорошо, вы можете вращать устройство, и у вас не будет проблем с размером камеры - она всегда имеет 100% ширины и высоты.
Проблема в том, что даже если вы делаете снимок с устройством, установленным в альбомной ориентации, результирующее изображение поворачивается на 90% по часовой стрелке.
Приложенные ниже a.jpg и b.jpg - a.jpg показывает камеру с кнопкой «сделать фото», а b.jpg показывает изображение результата. Все нормально, когда вы делаете фотографию в портретном режиме, но это не относится к пейзажу.
Мой вопрос - вы подозреваете, что проблема с плагином камеры? Или это связано с nativescript?
Я вижу, что плагин ориентации nativescript работает хорошо, я имею в виду, что когда я делаю фотографию, я могу получить информацию, в каком режиме была сделана фотография:
var orientation = require('nativescript-orientation');
console.log(orientation.getOrientation());
Если бы сейчас я мог как-то отредактировать это изображение и правильно повернуть его ...
Это страница, которая отображается при создании изображения (IMG - это путь от Localstorage, созданный на предыдущей странице)
Страница обзора:
<Page class="page" loaded="loaded" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Gradient="nativescript-gradient" xmlns:header="components/header">
<ScrollView height="100%" class="scrollview" scrollBarIndicatorVisible="false">
<StackLayout class="with-bottomnav" style="padding: 0">
<GridLayout rows="*" columns="40,*,40" class="zindex" width="100%" height="100" top="30" padding="0 20">
<Image col="0" src="{{ controls }}" tap="{{ action }}" stretch="none" class="menu" />
<Image col="1" src="{{ headerLogo }}" horizontalAlignment="center" class="logo" horizontalAlignment="center" />
<Image col="2" src="{{ user }}" horizontalAlignment="right" class="user" verticalAlignment="top" />
</GridLayout>
<Image src="{{ IMG }}" stretch="aspectFit" horizontalAlignment="center" id="Image" class="{{ exif == landscape ? 'dynamic' : 'dynamic-rotate' }}"></Image>
<StackLayout left="0" class="zindex" horizontalAlignment="center">
<Label class="info" text="Does this photo look ok to you ?" color="white"></Label>
<StackLayout class="footer white" verticalAlignment="bottom" width="100%" padding="0 20">
<Gradient:Gradient direction="to right" colors="#e41d8d, #ffa249" class="button login" tap="{{ perfect }}">
<GridLayout rows="*" columns="70,*">
<Label row="0" col="0" marginLeft="30" class="allow" />
<Label row="0" col="1" text="Perfect" horizontalAlignment="center" marginLeft="-70" />
</GridLayout>
</Gradient:Gradient>
<StackLayout class="button bordered login white" tap="{{ tryAgian }}">
<GridLayout rows="*" columns="70,*">
<Label row="0" col="0" marginLeft="30" class="deny" />
<Label row="0" col="1" text="Let Me try again" horizontalAlignment="center" marginLeft="-70" />
</GridLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
Код для страницы камеры. Изображение сделано, и некоторые переменные сохранены, затем я перенаправляю на страницу обзора - код выше показывает файл представления ....
model.photo = function (args) {
var orientation = require('nativescript-orientation');
// Get orientation of device
console.log(orientation.getOrientation());
var cam = page.getViewById("camPlus");
//cam.toggleCamera();
cam.requestCameraPermissions().then(function () {
if (!cam) {
cam = new CameraPlus();
}
cam.takePicture({ saveToGallery: false });
});
cam.on(CameraPlus.photoCapturedEvent, function(args) {
console.log('Event captured');
var documents = fs.knownFolders.documents();
var path = fs.path.join(documents.path, "AppPic.png");
var resultImage;
var source = new imageSourceModule.ImageSource();
source.fromAsset(args.data).then(function (res) {
// get width and height - i think i will use those and if image is made on landscape i will reverse width and height <- Hack :(
console.dir(res.width);
console.dir(res.height);
resultImage = res;
var folder = fs.knownFolders.documents();
var mixedDate = Date.now();
LS.setItem('Path-Avatar-Name',mixedDate);
// Save orientation, if landscape i will add css (transform:rotate(-90deg)) <- Hack :(
LS.setItem('Path-Avatar-Exif',orientation.getOrientation())
// Save some image stuff like path or name
var path = fs.path.join(folder.path, 'IMG'+ mixedDate + ".jpeg");
LS.setItem('Path-Avatar-Ext',".jpeg");
var saved = res.saveToFile(path, "jpeg");
console.log(path);
console.log(saved);
LS.setItem('Path-Avatar',path);
//resultImage.saveToFile(path, "png");
//var x = res.toBase64String('jpeg');
}).then(function() {
if (LS.getItem('DocumentType') == 'passport') {
//goToPage('take/review/review')
}
//goToPage('dashboard/dashboard/dashboard')
});
})
// Go to review page
goToPage('take/review/review')*/
};
![enter image description here](https://i.stack.imgur.com/CLgEy.jpg)