Using Croppie - Simple Example

Question

I'm trying to use the image cropper, Croppie from Foliotek, but for some reason it is not working for me - And I am using a very simple example.

I am using the demo example from the following page: http://foliotek.github.io/Croppie/

But all I get is a blank page in my browser - Both IE and Chrome.

My HTML code is as follows:

<html>  
<head>  
    <link href="croppie.css" rel="Stylesheet" />  
    <script src="croppie.js"></script>
</head>  
<body>

    <div id="demo-basic"></div>

    <script>
        var basic = $('#demo-basic').croppie({
            viewport: {
                width: 150,
                height: 200
            }
        });
        basic.croppie('bind', {
            url: 'cat.jpg',
            points: [77, 469, 280, 739]
        });

    </script>
</body>  
</html>

I hope someone is able to help me get this image cropper working :-)

Thanks - James

Welcome to Stack Overflow. What errors do you see in your Console? Do you need jQuery for this? If so, your page is not loading it. — Twisty, Jan 12 '17 at 21:34
Investigating further, this appears to be an issue with the library itself. I can load the image alone, but not in the framework with jQuery. https://jsfiddle.net/Twisty/afb76b7f/3/ and a vanilla test: https://jsfiddle.net/Twisty/afb76b7f/4/ — Twisty, Jan 12 '17 at 22:15

score 16 · Answer 1 · edited Jun 11 '19 at 10:37

16

The docs do not give you good examples. I found this: Jquery plugin Croppie to crop image Error

That helped me figure a few things out.

Working Example: https://jsfiddle.net/Twisty/afb76b7f/8/

HTML

<div id="page">
  <div id="demo-basic">
  </div>
</div>

CSS

#page {
  background: #FFF;
  padding: 20px;
  margin: 20px;
}

#demo-basic {
  width: 200px;
  height: 300px;
}

jQuery

$(function() {
  var basic = $('#demo-basic').croppie({
    viewport: {
      width: 150,
      height: 200
    }
  });
  basic.croppie('bind', {
    url: 'https://i.imgur.com/xD9rzSt.jpg',
    points: [77, 469, 280, 739]
  });
});

So your div needs to have some width and height, otherwise it will render too small to see the viewport. Also, if you remove the points: [77, 469, 280, 739], it will load the image full in the div.

edited Jun 11 '19 at 10:37

Zoe

27,060
21
118
148

answered Jan 12 '17 at 22:52

Twisty

30,304
2
26
45

but how can we use to rotate the image? – Naren Verma Jun 28 '17 at 08:22
@NarendraVerma this question did not include a rotate ability, nor does this library. – Twisty Jun 28 '17 at 14:34
Yes, That correct but do you have any idea how to do it? – Naren Verma Jun 30 '17 at 12:57
@NarendraVerma it could be done in a number of ways and with a number of plugins. What have you tried? – Twisty Jul 02 '17 at 17:27
When I am running this on localhost, it is giving CORS error. What could be the reason and solution? – Himalaya Garg May 24 '21 at 04:59
@HimalayaGarg you might want to review https://stackoverflow.com/questions/19966707/cors-error-on-same-domain – Twisty May 24 '21 at 14:34

score 2 · Answer 2 · answered Jan 30 '19 at 15:34

2

You just forgot to use the jquery librarie as mentionned in the plugin. In the head section of your html just add the call to jquery.

answered Jan 30 '19 at 15:34

KarApAtcik

21
1

Using Croppie - Simple Example

2 Answers2