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></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
22 Answers
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.
HTML
<div> <div> </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: ' 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.
