Menu
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
338
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.
89
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.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
