my html code for cropit:
我的cropit html代码:
<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 cropit:
我的cropit javascript代码:
$('.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 a image by using cropit jquery plugin, i read full document and multi example on web, but that return only a string that contain data:,
i dont know what is wrong?
我想通过使用cropit jquery插件裁剪一个图片,我在web上阅读了完整的文档和多例,但是只返回一个包含数据的字符串:,我不知道哪里出错了?
1 个解决方案
#1
4
You should define the .cropit-image-preview
css class in order to set the width and the height of cropped image.
您应该定义. cropitp -image-preview css类,以便设置裁剪后的图像的宽度和高度。
.cropit-image-preview {
/* You can specify preview size in CSS */
width: 100px;
height: 100px;
}
and also use the selector like this:
也可以像这样使用选择器:
var z = $('#image-cropper');
z.cropit({
exportZoom: 1,
imageBackground: true,
imageBackgroundBorderWidth: 15 // Width of background border
});
Try this: http://jsfiddle.net/grzveb09/
试试这个:http://jsfiddle.net/grzveb09/
#1
4
You should define the .cropit-image-preview
css class in order to set the width and the height of cropped image.
您应该定义. cropitp -image-preview css类,以便设置裁剪后的图像的宽度和高度。
.cropit-image-preview {
/* You can specify preview size in CSS */
width: 100px;
height: 100px;
}
and also use the selector like this:
也可以像这样使用选择器:
var z = $('#image-cropper');
z.cropit({
exportZoom: 1,
imageBackground: true,
imageBackgroundBorderWidth: 15 // Width of background border
});
Try this: http://jsfiddle.net/grzveb09/
试试这个:http://jsfiddle.net/grzveb09/