Croppie plugin not working on iOS and Safari

Question

I referred this URL

I'm using croppie plugin and it's working fine on Android, Chrome, Mozilla. But not working on iOS and Safari. If I uploaded an image from iOS then it's getting 90* rotate. Also, the image is not uploading on Safari. This is my full code,

HTML

<div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">Image Upluad</div>
      <div class="panel-body">
        <div class="row">
            <div class="col-md-4 text-center">
                <div id="upload-demo" style="width:350px"></div>
            </div>
            <div class="col-md-4" style="padding-top:30px;">
                <strong>Select Image:</strong>
                <br/>
                <input type="file" id="upload">
                <br/>
                <button class="btn btn-success upload-result">Upload Image</button>
            </div>
            <div class="col-md-4" style="">
                <div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
            </div>
        </div>
      </div>
    </div>
</div>

JS

<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$('#upload').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $.ajax({
            url: "/ajaxpro.php",
            type: "POST",
            data: {"image":resp},
            success: function (data) {
                html = '<img src="' + resp + '" />';
                $("#upload-demo-i").html(html);
            }
        });
    });
});
</script>

ajaxpro.php

$data = $_POST['image']; list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data); $data = base64_decode($data);
$imageName = time().'.png'; file_put_contents('upload/'.$imageName, $data);
echo 'done';

Please help me to fix.

score 3 · Accepted Answer · answered Feb 21 '18 at 06:24

3

I found the solution.

enableExif requires exif.js as stated here in the documentation: http://foliotek.github.io/Croppie/#enableExif

After adding that it's working fine on all devices.

answered Feb 21 '18 at 06:24

acmsohail

903
10
32

Really? On my iPhone (iOS 14.4) with Safari not even the offical Croppie demo is working. The EXIF orientation is not applied to the image, it shows rotated after selecting from the media library. I mean the "Upload Example (with exif orientation compatability)" on http://foliotek.github.io/Croppie/#demos – bass-t Mar 18 '21 at 10:40

Croppie plugin not working on iOS and Safari

1 Answers1