Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not working on iOS and Safari

See original GitHub issue

Its 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,

index.html

<html lang="en">
<head>
  <title>PHP - jquery ajax crop image before upload using croppie plugins</title>
  <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
  <script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
  <script src="./exif.js"></script>
  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">
</head>
<body>
<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>
<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>
</body>
</html>

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.

Demo Link

https://itsolutionstuff.com/post/php-jquery-ajax-crop-image-before-upload-using-croppie-pluginexample.html

Issue Analytics

State:
Created 6 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

thedustinsmithcommented, Feb 15, 2018

All of the demo code is in this repository.

https://github.com/Foliotek/Croppie/blob/master/index.html https://github.com/Foliotek/Croppie/blob/master/demo/demo.js

Pay close attention to this line: https://github.com/Foliotek/Croppie/blob/master/index.html#L530

The html you posted above does not reference exif.js.

0reactions

thedustinsmithcommented, Feb 20, 2018

Your #upload is a file input. A croppie element can’t be a file input. Make a separate div #croppie-el and do $('#croppie-el').croppie(....)

If you have any further problems, I would recommend posting on stack overflow. They have a more active community and you’ll probably get help quicker. Croppie’s github is more for reporting bugs in the plugin’s behavior. If we have several questions in here to sort through, then the bugs don’t always get as much attention as they should.