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: /
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
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
Share Improve this question asked Jan 12, 2017 at 20:28 JamesJames 911 gold badge1 silver badge2 bronze badges 2- 1 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 Commented Jan 12, 2017 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. jsfiddle.net/Twisty/afb76b7f/3 and a vanilla test: jsfiddle.net/Twisty/afb76b7f/4 – Twisty Commented Jan 12, 2017 at 22:15
2 Answers
Reset to default 16The 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.
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.