Croppie: Can't get result on iPhone 6s

[k-lusine]

Hi
I'm facing such an issue on iPhone 6s (iOS 9.2)
I want to show the crop result by replacing the src attribute of an existing tag. It works okay everywhere except iOS
I entered html structure and js code in this fiddle but it's not complete enough to see the result https://jsfiddle.net/n9bnkhma/
You can see the working demo here. http://kadmos.li/lus/and/well/t1.html
By the way, it works okay, when I bind a photo instead of uploading it in such a way
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = $("#cropResult").attr("data-img-original");
$uploadCrop.croppie('bind', {
url: img.src,
points: [4 points here],
});

Thanks in advance for helping with this issue

Regards
Lusine

[thedustinsmith]

You might be referring to the same issue described in #37.

If so, you can try grabbing the latest, and see if that fixes your issue.

[k-lusine]

Thanks
Yes I know this issue, I'm using the latest updated version of croppie that has if(src.substring(0,4).toLowerCase()==='http') {
img.setAttribute('crossOrigin', 'anonymous');
} included. I tried commenting out the if (setting the attribute without if), but all the same plus the issue discribed in #37 (image not fitted in boundary)

[thedustinsmith]

Sorry - I really don't understand the issue you're having, and I don't have an iPhone to test it out. Have you tried remote debugging your iPhone and see if there's an error in your console when you're setting the src attribute?

[k-lusine]

Ahh, seems like it's because of the photos taken on iPhone 6S (I guess so, as it works with other images). It has some new features for camera (it records a very short video and the photo itself). Though I was trying to upload the photo, that has .jpeg extension, it didn't work. But it works with any other photo. I don't have Mac for remote debugging so I don't know the error exactly. When I try to upload the same image from windows, it works but very slowly

[BabysbreathJJ]

I found that using the photo I just take , the picture can't show, just blank. This problem only occur when I using the back-facing camera. I don't know why. I tested it in iPhone5s.

[thedustinsmith]

Could one of you upload a sample photo that you're unable to crop to this github issue? I don't have an iPhone to test with, my android devices work fine.

[k-lusine]

@thedustinsmith sorry for late response.
Problem is that when I send the photos via email and try to upload it from my computer it works okay. The problem is on IOS. Anyway find the photo attached

Here is the test case

1. iPhone 6S IOS 9 back camera, normal mode
   Orientation landscape - The cropped result is rotated
   Orientation protrait The result is empty

Here's the link where I test to upload
http://kadmos.li/lus/and/well/t1.html

Thanks
Lusine

[nejclepen]

@k-lusine i think that you have "image orientation problem". When you have uploaded image to the server try to call function correctImageOrientation($file_distionation).

PHP Code

function correctImageOrientation($filename) {
    if (function_exists('exif_read_data')) {

        $exif = exif_read_data($filename);

        if($exif && isset($exif['Orientation'])) {

            $orientation = $exif['Orientation'];

            if($orientation != 1){
                $img = imagecreatefromjpeg($filename);
                $deg = 0;
                switch ($orientation) {
                    case 3:
                        $deg = 180;
                        break;
                    case 6:
                        $deg = 270;
                        break;
                    case 8:
                        $deg = 90;
                        break;
                }
                if ($deg) {
                    $img = imagerotate($img, $deg, 0);
                }
                imagejpeg($img, $filename, 95);
            } 
        }
    } 
}

[GabrielCheung128]

@BabysbreathJJ Have u fixed this problem? I am also facing it.

[thedustinsmith]

Are you all using the EXIF rotation capabilities in croppie?

[GabrielCheung128]

Yes. I came across the issue that @BabysbreathJJ had mentioned before. And I fixed it with ios-imagefile-megapixel. It seems that for some versions of the IOS(mainly 8.x back camera only), enabling the EXIF in Croppie will lead to the failure of loading the image. Once I disabled the EXIF, nothing goes wrong only that I cannot rotate the image. This is caused by an IOS bug of Canvas. At last I used ios-imagefile-megapixel to compress the image (pixels) first and get the orientation of it manually with EXIF, then passing the compressed image to croppie with enableExif false. This bug does not occur in IOS 9.2(Don't really know which version it is fixed.)

`var canvas1 = document.getElementById('again-resultImage');

            var reader = new FileReader();
            var orientation = 1;

            reader.onloadend = function(e) {
                var image = new Image();
                image.onload = function() {
                    EXIF.getData(image, function() {
                        // console.log(EXIF);
                        orientation = EXIF.getAllTags(this).Orientation;
                        mpImg.render(canvas1, { maxWidth: 500, maxHeight: 500, quality: 0.5, orientation: orientation }, function(){
                            $uploadCrop.croppie('bind', {
                                url: canvas1.toDataURL('image/jpeg', 0.4),
                                // orientation: 8
                            });
                            $('.upload-again-preview').addClass('ready');
                            canUploadAgain = true;
                        });
                    });
                };
                image.src = e.target.result;
            };`

[gs9999]

Hello.

I am working using croppie on the iOS platform. The EXIF option does not work, as it just returns a blank white canvas.

Also, when turned off (EXIF option), croppie returns mis-cropped images with black spaces in it, and flips the orientation to upside -down or to the left 90 degrees.

Is this ever going to get fixed? I dunno.... would be nice. But I am also looking at other EXIF javascript libraries, as I could 'insert' EXIF data, and my server would automatically re-orient as it reads this EXIF data before finally saving the file.

Anyways... I think this library (croppie) is just abosolutely great. I will move on in my project, and see later about delving back into it after the community has a moment to collect itself.

Thank you very much, we're almost there on this one!

GS

[CarlosHello]

Hey Dustin, thanks for Croppie - it's an awesome library. Super easy to use, both for developers and app users.
I'm also having the same problem as mentioned above - Croppie works excellent without Exif, but once I enable Exif I get a blank white canvas.
Help appreciated!
Thanks