JCrop沒有正確裁剪圖像

Question

我想使用JCrop裁剪圖像，但是保存在我的服務器上的圖像是傾斜的。我似乎無法使尺寸正常工作。這裏是我的JCrop代碼：

... 
var imgwidth = $("#previewSub2").width(); 
var imgheight = $("#previewSub2").height(); 

$("#previewSub").css("height", "220px"); 
$("#previewSub").css("width", "auto"); 

$("#previewSub").Jcrop({ 
    onChange: showPreview, 
    onSelect: showPreview, 
    aspectRatio: 1, 
    setSelect: [0,imgwidth,0,0], 
    minSize: [90,90], 
    addClass: 'jcrop-light' 
}); 

注意#previewSub是我裁剪圖像，並且#previewSub2是被裁剪爲圖像的縮略圖（預覽）。這裏是我的JCrop代碼的其餘部分：

function showPreview(coords) 
{ 
    var imgSize = $("#previewSub").height(); 
    var imgWidth = $("#previewSub").width(); 

    var rx = 150/coords.w; 
    var ry = 150/coords.h; 

    $('#x').val(coords.x); 
    $('#y').val(coords.y); 
    $('#w').val(rx*imgWidth); 
    $('#h').val(ry*imgSize); 

    $('#previewSub2').css({ 
     width: Math.round(rx * imgWidth) + 'px', 
     height: Math.round(ry * imgSize) + 'px', 
     marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
     marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    }); 
} 

對於#x，#y，#w，#y，我真的不知道什麼值，把爲val()。我嘗試了各種組合，但我的剪裁總是關閉。

請注意縮略圖預覽工作正常。

Answer 1

我試着使用你的代碼，並遇到類似的問題。使用本教程的代碼在https://rubyplus.com/articles/3951-Cropping-Images-using-jCrop-jQuery-plugin-in-Rails-5工作對我來說，這應該是類似下面的標準的jQuery：

var ImageCropper, 
bind = function(fn, me){ return function(){ return fn.apply(me,arguments); }; }; 

jQuery(function() { 
    return new ImageCropper(); 
}); 

ImageCropper = (function() { 
    function ImageCropper() { 
    this.updatePreview = bind(this.updatePreview, this); 
    this.update = bind(this.update, this); 
    $('#cropbox').Jcrop({ 
     aspectRatio: 1, 
     setSelect: [0, 0, 600, 600], 
     onSelect: this.update, 
     onChange: this.update 
    }); 
    } 

    ImageCropper.prototype.update = function(coords) { 
    $('#course_crop_x').val(coords.x); 
    $('#course_crop_y').val(coords.y); 
    $('#course_crop_w').val(coords.w); 
    $('#course_crop_h').val(coords.h); 
    return this.updatePreview(coords); 
    }; 

    ImageCropper.prototype.updatePreview = function(coords) { 
    return $('#preview').css({ 
     width: Math.round(100/coords.w * $('#cropbox').width()) + 'px', 
     height: Math.round(100/coords.h * $('#cropbox').height()) + 'px', 
     marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px', 
     marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px' 
    }); 
    }; 

    return ImageCropper; 

})(); 

還要確保，如果你有很強的參數，你使crop_x，crop_y，crop_h和crop_w。