Родной скрипт и ориентация изображений - PullRequest
0 голосов
/ 15 января 2019

Я использую 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 enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...