javascript - 从图片中拍摄的照片在 Android 中的 cordova 相机插件中裁剪时不会显示

标签 javascript cordova ionic-framework

使用 camera cordova plugin 的裁剪选项中不会显示从图片中拍摄的照片。但是,当我从图库中选择图像或从相机拍照时,会出现裁剪选项。

插件

Cordova 插件相机2.1.1

代码

 var options = {
            quality: 75,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
            allowEdit: true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 300,
            targetHeight: 300,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        };
        $cordovaCamera.getPicture(options).then(function(imageData) {
        console.log('succes')
        }, function(err) {
        console.log('succes')
        });

我真的需要一些帮助来解决这个问题。

最佳答案

可以引用ngCordove - Camera .

你需要依赖注入(inject) 添加“ngCordova”,就像这样。

app.js

angular.module('starter', ['ionic','ngCordova'])

camera.html

<ion-content>
    <div class="list">

        <div class="item item-thumbnail-right item-icon-right" ng-click="toCamera()">
            <img id="myImage" style="margin-right:50px;">
            <h2 class="positive">Camera</h2>
            <i class="icon ion-ios-arrow-right balanced"></i>
        </div>

    </div>
</ion-content>

controllers.js

app.controller('CameraCtrl', function ($scope, $cordovaCamera) {

$scope.toCamera = function () {
    var hideSheet = $ionicActionSheet.show({
        buttons: [
            { text: 'Take a picture' },
            { text: 'Select a picture' }
        ],
        cancelText: 'Cancel',
        cancel: function () {
        },
        buttonClicked: function (index) {
            console.log(index);
            if (index == '0') {
                document.addEventListener("deviceready", function () {
                    //take a picture
                    var options = {
                        quality: 100,
                        destinationType: Camera.DestinationType.DATA_URL,
                        sourceType: Camera.PictureSourceType.CAMERA,
                        allowEdit: true,
                        encodingType: Camera.EncodingType.JPEG,
                        targetWidth: 1280,
                        targetHeight: 720,
                        popoverOptions: CameraPopoverOptions,
                        saveToPhotoAlbum: true,
                        correctOrientation: true
                    };
                    $cordovaCamera.getPicture(options).then(function (imageData) {
                        var image = document.getElementById('myImage');
                        image.src = "data:image/jpeg;base64," + imageData;
                    }, function (err) {
                        // error
                    });
                }, false);

            } else if (index == '1') {
                document.addEventListener("deviceready", function () {
                    //Select a picture
                    var options = {
                        destinationType: Camera.DestinationType.FILE_URI,
                        sourceType: 2,     //set 0 or 2,is system picture
                        quality: 100,
                        allowEdit: true,
                        targetWidth: 1280,
                        targetHeight: 720
                    };

                    $cordovaCamera.getPicture(options).then(function (imageURI) {
                        var image = document.getElementById('myImage');
                        image.src = imageURI;
                    }, function (err) {
                        // error
                    });

                    //$cordovaCamera.cleanup().then(); // only for FILE_URI

                }, false);
            }
            return true;
        }
    })
}});

关于javascript - 从图片中拍摄的照片在 Android 中的 cordova 相机插件中裁剪时不会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40122342/

相关文章:

javascript - 如何计算 list.js 中当前未显示的已选中复选框?

javascript - 如何根据容器大小设置字体大小?

javascript - 如何在 Cordova 中压缩 SQL 指令?

javascript - window.location.href 在phonegap应用程序中不起作用

spring - 吉普斯特 2 : What is the difference between the authentication option?

android - Ionic 3 - 读取 NFC 卡吗?

javascript - ng-messages-include 不起作用

Javascript 函数没有给出图像的预期结果

android - 在 android WebView 中登录 Facebook

angular - undefined object 数组的 ionic 存储