Photos taken by camera doesn't show on cropping and cropped screen on iOS devices about jr-crop

[kareljan]

I'm having the same problem. This is my code

$scope.takePicture = function(){
  var options = {
  quality: 80,
  destinationType: Camera.DestinationType.DATA_URL,
  sourceType: Camera.PictureSourceType.CAMERA,
  allowEdit: false,
  encodingType: Camera.EncodingType.JPEG,
  popoverOptions: CameraPopoverOptions,
  saveToPhotoAlbum: false
};

$cordovaCamera.getPicture(options).then(function(imageData) {
  // $(".picture img").attr("src", "data:image/jpeg;base64," + imageData);
  $jrCrop.crop({
            url: "data:image/jpeg;base64," + imageData,
            width: 200,
            height: 200
        }).then(function(canvas) {
            // success!
            $(".picture img").attr("src", canvas.toDataURL());
        }, function() {
            // User canceled or couldn't load image.
        });
}, function(err) {
  // error
});
}

So there is an offset somewhere.

[kareljan]

When you add correctOrientation = true to the options it works for pictures you take.

var options = {
  quality: 80,
  destinationType: Camera.DestinationType.DATA_URL,
  sourceType: Camera.PictureSourceType.CAMERA,
  allowEdit: false,
  correctOrientation: true,
  encodingType: Camera.EncodingType.JPEG,
  popoverOptions: CameraPopoverOptions,
  saveToPhotoAlbum: false
};

And if you want the user to pick a picture from his library. Also use $cordovaCamera.getPicture and not $cordovaImagePicker.getPictures.

now it works for me.

[colesobotka]

This could be related to an issue I experienced on ios. For some reason, when you load the data from a portrait image, it doesn't initially scale and center it properly. So it's there, but off screen. You can get a glimpse of it if you zoom in for a while. It will suddenly appear.

I'll be investigating this particular bug.

What type of URL are you supplying to the plugin?

[JrSchild]

@clarkorz could you confirm that @kareljan's comment fixes this issue? If so, I will update the README.

And @colesobotka have you researched this further?

[colesobotka]

@JrSchild The correctOrentation worked for me. I'm currently having some weird issues with resizing the image after the crop though. My devices are having issues with the onLoad on creating an image element for some reason...

[mortymatters]

JrSchild, I'm having the same problem, capture the image but jCrop shows a blank white screen instead of the captured image? I'm using the same code as @kareljan

[m0rganic]

I think running into a similar issues as @shancox and @kareljan and have also provided correctOrentation to true the image data is making into the modal just not displaying properly.

One observation I can add to the conversation: if I remove the webkit transform styles attr from the img element the image shows up in the center of the screen but the zoom doesn't seem quite right.

Screenshot and dom with jr-crop transform styles on img tag:

<div class="jr-crop modal slide-in-up ng-enter active ng-enter-active">
    <div class="jr-crop-center-container">
        <div class="jr-crop-img" ng-style="{width: width + 'px', height: height + 'px'}" style="width: 200px; height: 200px;">
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRg...wzse+K8XEVLGbkf/Z" 
            style="-webkit-transform: translate3d(-1124px, -1532px, 0px) scale3d(0.08169934640522876, 0.08169934640522876, 1);">
        </div>
    </div>
    <div class="bar bar-footer bar-dark jr-crop-footer">
        <button class="button button-clear ng-binding" ng-click="cancel()">Cancel</button>
        <div class="title ng-binding"></div>
        <button class="button button-clear ng-binding" ng-click="crop()">Choose</button>
    </div>
</div>

Screenshot and dom after manually removing webkit transform styles from img tag:

<div class="jr-crop modal slide-in-up ng-enter active ng-enter-active">
    <div class="jr-crop-center-container">
        <div class="jr-crop-img" ng-style="{width: width + 'px', height: height + 'px'}" style="width: 200px; height: 200px;">
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRg...wzse+K8XEVLGbkf/Z">
        </div>
    </div>
    <div class="bar bar-footer bar-dark jr-crop-footer">
        <button class="button button-clear ng-binding" ng-click="cancel()">Cancel</button>
        <div class="title ng-binding"></div>
        <button class="button button-clear ng-binding" ng-click="crop()">Choose</button>
    </div>
</div>

Run iPhone 5 on iOS 8.4..

Cordova CLI: 5.1.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 1.0.1
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: 1.7.0
ios-sim version: 4.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.7
Xcode version: Xcode 6.4 Build version 6E35b

I'm not certain how to modify my code that's calling jr-crop to not include the styles without changing the jr-crop code itself. Does anyone have a recommendation on how to resolve this display issue?

[ankushthakurg]

I Need cropping after taking picture from cemara in ionic

[GrimGX]

I am having a similar issue when using jr-crop on IOS 9.2. I have not yet found a way to fix it, though what i have observed is that the image is drawing. If you zoom after taking the picture you will find that the picture exists but is offset out of frame to the left. (Also the center point around which it rotates is not the center point of the image)

I have implemented code to re size the image (as in the data passed back to the server) from another issue or fork but this does not seem to be the cause of the issue.

I have also found that this issue only happens when taking the picture with the camera in portrait mode. If the camera is in landscape mode all works well.

I have tried using "correctOrientation: true" and it made no difference.

Any help would be much appreciated.

Thanks.

UPDATE: After playing around for a few hours i managed to get it to work with the "correctOrientation: true" solution. I had a sintax error.

[sahayarex]

I have tried correctOrientation but still it doesnt work for me. I use it on android device. Is there any solution for this ??

[boyfunky]

hey anyone got this working, for me it shows an empty modal when i run it instead of d cropped image

[jpbrown250]

I was having a few problems on iOS myself, some of the things I did to solve my problems were:
Stop using a service to take a picture, because it was messing up my image before it got to the jrCrop. here is an example of what..
does not work
return $cordovaCamera.getPicture(options) //the options I used are same as kareljan's options .then(function(imageData) { //success return "data:image/jpeg;base64, " + imageData; }
and in the controller I had:
SSFCameraService.getPicture() .then(function(res) { $jrCrop.crop({ url: res, width: 130, height: 10 }).then(function(canvas) {

what does work for me is the example @kareljan made. Any ideas why this does not work as a service? I have what I need to make my app, but I would like to know why I can't use it as a service.

[QiaoyuanMaxDeng]

I have researched this issue in two of my applications for a few days. Here is the solution for me, https://issues.apache.org/jira/browse/CB-12141. The main issue was cause by cordova-plugin-statusbar version 2.2.1 and they have a fix in current master. May be part of 2.2.2 in the future. Please try if it could help you guys. Thanks.

[amrayoub]

allowedit= true , is basically calling the device native crop app to crop the image , if the user does not has the crop app , then there is a need for a third party library to do so , does any one knows a way to crop the image after taken it with cordova camera plugin

[amrayoub]

I tried jrCrop. , but its not supported anymore

[QiaoyuanMaxDeng]

Try https://fengyuanchen.github.io/cropperjs/. We use it for multiple products after capture images from camera.

[amrayoub]

@QiaoyuanMaxDeng thanks a lot.
is there a way after taking a picture you can crop it and display it on the dom (html)

[QiaoyuanMaxDeng]

ya. I am using AngularJS to do so. First call cordova camera plugin, then get url. Pass file url to cropperjs to show. After cropping, you can save it to persistent place. Then load persistent file url through AngualrJS in html.

[amrayoub]

@QiaoyuanMaxDeng Hi , I tried but i keep getting errors.
can you provide me with example , I would appreciate it a lot.
I post a question and my code there , u can answer or provide me a code example over there

http://stackoverflow.com/questions/41725397/ionic-cordova-cropping-image-then-upload-it

[QiaoyuanMaxDeng]

@amrayoub responded to you on stacksoverflow.

[misterdev]

When this happened to me I solved this problem using ios-imagefile-megapixel.

var f = evt.target.files[0];
var mpImg = new MegaPixImage(f);
var resImg = new Image();

mpImg.render(resImg, { maxWidth: 800, maxHeight: 800 }, function() {
    var lowresImage = resImg.src;
	$jrCrop.crop({
        url: lowresImage,
        width: 300,
        height: 300,
        circle: circle || false
    }).then(function(canvas) {
        // success!
        var image = new Image();
        image.src = canvas.toDataURL();

    	resolve(image.src);
    }, function() {
        resolve(null);
    });
});