Question

我有一个基本的离子应用程序，我希望应用程序拍摄用户的照片，然后用户可以将拍摄的照片裁剪为护照尺寸的照片。

有谁知道我怎么能做到这样的事情？我已经尝试过jrcrop，但对于我的生活，我无法让它发挥作用。

Answer 1

对于我的Ionic应用程序，我使用了ng-flow的组合进行上传（在flow-file-added上，验证文件是否正常（符合文件扩展名/上传要求等））然后启动了一个实例ngCropper执行裁剪。裁剪完成后，启动flowjs对象上的flow.upload()以执行上载。

我无法将所有代码都提供给此解决方案，但实现此目的的真正拼接发生在裁剪之后：

首先，通过var dataUrl = this.$cropCanvas.cropper('getCroppedCanvas').toDataURL();
从中创建一个blob，something like this JS function效果很好。
删除原始排队的上传文件（完整图片）
将其替换为裁剪 blob
上传。

替换和上传技术如下所示：

var theBlob = that.dataURLToBlob(dataUrl);
theBlob.name = Utility.generateGuid() + '.jpg'; // give it a new name if you like
// Remove existing image which was added to flow files cache on image dialog select
$scope.flowTileObj.flow.removeFile($scope.flowTileObj.flow.files[0]);
$scope.flowTileObj.flow.addFile(theBlob);
// Perform upload
$scope.flowTileObj.flow.upload();

祝你好运。

Answer 2

你需要添加这个插件

bower install --save ngCordova
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file
ionic platform add ios

并使用此代码

<img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" height="200px"/>

   $scope.addImage = function() {
            var options = {
            destinationType : Camera.DestinationType.FILE_URI,
            sourceType : Camera.PictureSourceType.CAMERA, // Camera.PictureSourceType.PHOTOLIBRARY
            allowEdit : false,
            encodingType: Camera.EncodingType.JPEG,
            popoverOptions: CameraPopoverOptions,
        };
        $cordovaCamera.getPicture(options).then(function(imageData) {
            onImageSuccess(imageData);

            function onImageSuccess(fileURI) {
                createFileEntry(fileURI);
            }

            function createFileEntry(fileURI) {
                window.resolveLocalFileSystemURL(fileURI, copyFile, fail);
            }
            function copyFile(fileEntry) {
                var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
                var newName = makeid() + name;

                window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
                    fileEntry.copyTo(
                        fileSystem2,
                        newName,
                        onCopySuccess,
                        fail
                    );
                },
                fail);
            }
            function onCopySuccess(entry) {
                $scope.$apply(function () {
                    $scope.images.push(entry.nativeURL);
                });
            }

            function fail(error) {
                console.log("fail: " + error.code);
            }

            function makeid() {
                var text = "";
                var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

                for (var i=0; i < 5; i++) {
                    text += possible.charAt(Math.floor(Math.random() * possible.length));
                }
                return text;
            }

        }, function(err) {
            console.log(err);
        });
    }

离子照片捕捉＆amp;作物

2 个答案: