html - jQuery cropit export method return only 'data:,' string -


my html code cropit:

<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 javascript code cropit:

$('.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 crop image using cropit jquery plugin, read full document , multi example on web, return string contain data:, dont know wrong?

you should define .cropit-image-preview css class in order set width , height of cropped image.

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

and use selector this:

var z = $('#image-cropper'); z.cropit({     exportzoom: 1,     imagebackground: true,     imagebackgroundborderwidth: 15 // width of background border }); 

try this: http://jsfiddle.net/grzveb09/


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -