从图库中选择图像时离子图像裁剪

时间:2017-06-01 12:28:18

标签: angularjs ionic-framework

我在离子v1和角度v1中使用了cordova plugin camera。 当我们从相机拍摄照片时,插件本身为裁剪图像提供选项..但是从照片库中选择图像中没有选项。

              $scope.choosePhoto = function () {
                    var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 200,
                    targetHeight: 200,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: true
                };

             $cordovaCamera.getPicture(options).then(function (imageData) {
                        $scope.imgURI = "data:image/jpeg;base64," + imageData;
                        window.localStorage.setItem('image',($scope.imgURI));
                    }, function (err) {
                        // An error occured. Show a message to the user
                    });
                }

选择图库图片时是否有任何图像裁剪解决方案 对于我的项目,我也使用cordova plugin crop。 有一个选项,如

plugins.crop.promise('/path/to/image', options)
.then(function success (newPath) {

})
.catch(function fail (err) {

})

但它不起作用,它只适用于android我想..

任何了解此事的人都可以帮忙吗?

3 个答案:

答案 0 :(得分:0)

如果你想在iOS中访问它,那么你需要在targetWidth,targetHeight中提供高分辨率图像。 尝试添加:

  

targetWidth:2000,targetHeight:2000

它适用于iOS和Android。

答案 1 :(得分:0)

尝试使用此解决方案 $ cordovaCamera

 navigator.camera.getPicture(gotPhoto, onError, {
                            quality: 90,
                            destinationType: navigator.camera.DestinationType.FILE_URI,
                            sourceType: navigator.camera.PictureSourceType.CAMERA,
                            allowEdit: true, // here it allow to edit pic.
                            encodingType: Camera.EncodingType.JPEG,
                            mediaType: Camera.MediaType.PICTURE,
                            targetWidth: 200, //what widht you want after capaturing
                            targetHeight: 200
                        });

试试这个......对于画廊我没有对它进行过画廊测试,但是对于相机来说,它上面的裁剪工作。

 navigator.camera.getPicture(gotPhoto, onError, {
                            quality: 50,
                            destinationType: navigator.camera.DestinationType.FILE_URI,
                            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
                            allowEdit: true,
                            targetWidth: 200, //what widht you want after capaturing
                            targetHeight: 200
                        });

有关详细信息,请参阅此link

答案 2 :(得分:0)

 navigator.camera.getPicture(onSuccess, onFail, {
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI
  });

  function onSuccess(imageData) {
       console.log(imageData);

       /*Crop Image Plugin Code*/
       plugins.crop(function success (data) {
          console.log(data);
          var image = document.getElementById('myImage');
          image.src = data;
       }, 
       function fail () {

       }, imageData, {quality:100});
  }

 function onFail(message) {
    alert('Failed because: ' + message);
 }