nativescript - Nativescript 和图像方向

Question

我正在使用 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')*/
};

标签： nativescript