Jquery plugin Croppie to crop image Error

Question

I want to use Jquery Croppie Plugin on my site to crop image for my user but I've got this problem the code that i write not show as an example in Croppie Site

Here's my code

HTML code

<input type="file" id="upload" value="Choose a file">
<button class="upload-result">Result</button>
<div class="upload-msg">
   Upload a file to start cropping
</div>
<div id="upload-demo"></div>

JS code

$uploadCrop = $('#upload-demo').croppie({
   viewport: {
      width: 200,
      height: 200,
      type: 'circle'
   },
   boundary: {
      width: 300,
      height: 300
   }
});

NB : I have link my site with jquery, croppie.js and croppie.css

score 51 · Accepted Answer · edited Nov 13 '19 at 15:48

Try it, it works for me. I used PHP to save the image.

<?php
    if(isset($_POST['imagebase64'])){
        $data = $_POST['imagebase64'];

        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
        $data = base64_decode($data);

        file_put_contents('image64.png', $data);
    }
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="croppie.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="croppie.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
    var $uploadCrop;

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();          
            reader.onload = function (e) {
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                });
                $('.upload-demo').addClass('ready');
            }           
            reader.readAsDataURL(input.files[0]);
        }
    }

    $uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'circle'
        },
        boundary: {
            width: 300,
            height: 300
        }
    });

    $('#upload').on('change', function () { readFile(this); });
    $('.upload-result').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'original'
        }).then(function (resp) {
            $('#imagebase64').val(resp);
            $('#form').submit();
        });
    });

});
</script>
</head>
<body>
<form action="test-image.php" id="form" method="post">
<input type="file" id="upload" value="Choose a file">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<a href="#" class="upload-result">Send</a>
</form>
</body>
</html>

a JSFiddle link

I copied this over and ran it. I keep getting an `Undefined Offset: 1` on lines `8` and `9` which read `list($type, $data) = explode(';', $data);` and `list(, $data) = explode(',', $data);`. It makes a file, but it is unreadable. Any pointers would be great! — xxSithRagexx, Dec 03 '17 at 08:21
This should be the ony and only example in the Croppie Documentation site. All examples there are only understandable by its developer, there is not a single example actually working. — andreszs, Aug 12 '19 at 00:08

Jquery plugin Croppie to crop image Error

1 Answers1

Linked