0
부트 스트랩 3 모달을 사용하여 cropperjs Cropper (https://github.com/fengyuanchen/cropper) 이미지를 api에서로드하여 표시. 아무도 이미지에 농작물 이미지에서 크로스 기원 헤더를 찾습니다 있기 때문에 부트 스트랩 3 모달, 크로 퍼스
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);
}
});
}