Using Croppie - Simple Example
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
Answer
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.