0
使用bootstrap 3模式顯示帶有從api加載的圖像的cropperjs裁剪器(https://github.com/fengyuanchen/cropper)。出於某種原因,圖像的負載被稱爲當圖像寬度是0,並且割草機是增加顯示:所以它不會出現 bootstrap 3 modal,cropperjs
function createCropZone(url){
$('#options-modal')
.modal('show')
.find('.modal-title')
.text('Crop Zone ')
var img = $('<img>', {'src' : url})
$('.modal-body .row')
.empty()
.append(img)
img.on('load', function(){
var defaultWidth = 1024;
if(img.width() === 0){
$('.modal-body').css({'width' : defaultWidth + 'px'})
$('.modal-content').css({'width' : (defaultWidth + 50) + 'px'})
$('.modal-content').css({'left': '-220px'})
}else{
$('.modal-body').css({'width' : img.width() + 'px'})
$('.modal-content').css({'width' : (img.width() + 50) + 'px'})
if(img.width() > 800){
$('.modal-content').css({'left': '-220px'})
}
}
// cropZone($('.modal-body .row').get(0))
})
$(img).cropper({
aspectRatio: 16/9,
crop: function(e) {
// Output the result data for cropping image.
console.log(e.x);
console.log(e.y);
console.log(e.width);
console.log(e.height);
console.log(e.rotate);
console.log(e.scaleX);
console.log(e.scaleY);
}
});
}