The jQuery cropit export method returns only the string "data :,"

Question

my html code for the lesson:

<div id="image-cropper" style="direction: ltr"> <div class="row margin-top-25"> <div class="col-md-8 col-md-offset-2"> <div class="cropit-image-preview-container"> <div class="cropit-image-preview"></div> </div> </div> </div> <div class="row margin-top-15"> <div class="col-md-4 col-md-offset-4"> <input type="range" class="cropit-image-zoom-input" /> </div> </div> <div class="row margin-top-15"> <div class="col-md-4 col-md-offset-4"> <input type="file" style="display: none" class="cropit-image-input" /> <div class="R_butt_blue choose_pic text-center">انتخاب تصویر</div> </div> </div> </div> 

and my javascript code for the lesson:

 $('.choose_pic').click(function(){ $('.cropit-image-input').click(); }); var z = $('#image-cropper').cropit({ exportZoom: 1, imageBackground: true, imageBackgroundBorderWidth: 15 // Width of background border }); $('.send_image').click(function(){ var h = z.cropit('export'); $('#photo_show img').attr({ src: h }); }); 

I want to crop the image using the jQuery plugin for harvest, I read the full document and example on the Internet , but only returns a string containing data:, I don’t know what is wrong?

Answer 1

You must define the .cropit-image-preview css class to set the width and height of the cropped image.

 .cropit-image-preview { /* You can specify preview size in CSS */ width: 100px; height: 100px; } 

and also use the selector as follows:

 var z = $('#image-cropper'); z.cropit({ exportZoom: 1, imageBackground: true, imageBackgroundBorderWidth: 15 // Width of background border }); 

Try the following: http://jsfiddle.net/grzveb09/