jQuerycropit 导出方法仅返回 'data:,' 字符串答案

【问题标题】：jQuery cropit export method return only 'data:,' stringjQuerycropit 导出方法仅返回 'data:,' 字符串
【发布时间】：2015-07-03 12:11:45
【问题描述】：

我的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>

还有我用于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 });
});

我想使用cropit jquery插件裁剪图像，我阅读了完整的文档和多个example on web，但只返回一个包含data:,的字符串不知道怎么回事？

【问题讨论】：

标签： jquery html crop

【解决方案1】：

您应该定义.cropit-image-preview css 类以设置裁剪图像的宽度和高度。

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

也可以像这样使用选择器：

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

试试这个： http://jsfiddle.net/grzveb09/

【讨论】：