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')*/
};

本机脚本和图像方向

0 个答案: