3

I am trying to crop an image to cicle using the Croppie Library

I have tried to use their functions to return base64 encoded image. And it return a base64 code but without the image: Here is my code:

<div id="vanilla-demo"></div>
 </div>
<img id="myImage" src="">

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="croppie.js"></script>

<script type="text/javascript">


        var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
            viewport: { width: 200, height: 200 , type:'circle'},
            boundary: { width: 400, height: 400 },
            showZoom: false
        });
        vanilla.bind('dac.jpg');
            vanilla.result('canvas','original').then(function (src) {
                    console.log(src);
                    $('#myImage').attr('src', src);
            });

</script>
Paulo Fidalgo
  • 21,709
  • 7
  • 99
  • 115
AKRAM EL HAMDAOUI
  • 1,818
  • 4
  • 22
  • 27

1 Answers1

8

I'm one of the creators of Croppie. With a quick glance at your code, I'd say that your croppie isn't bound yet. The bind method returns a Promise that you'll need to wait to be resolved. The Promise waits for the image to load and all of the initialization logic to finish on the Croppie.

I would change your bind and result logic to do the following instead:

vanilla.bind('dac.jpg').then(function() {
    vanilla.result('canvas','original').then(function (src) {
        console.log(src);
        $('#myImage').attr('src', src);
    });
});
Dustin Smith
  • 116
  • 1
  • 7
  • Hey Dustin! Thanks for creating this plugin. I pretty much have figure everything out except how to pass the cropped photo be be stored on the server. Can't seem to find anything on how to do that anywhere. – xxSithRagexx Dec 03 '17 at 08:01
  • @xxSithRagexx you should probably ask this as a question of its own, but I was able to send the base64 string to a google sheet using a google apps script with a POST and I think I did with a GET too from the client side. It was super picky though. – Coty Embry Mar 16 '18 at 22:47