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
Post a Comment