jquery - JCrop 得到裁剪宽度和高度

Question

我正在使用 JCrop，它工作得非常好。但是当我点击“裁剪按钮”时，它总是生成“300px”x“150px”的图像。我只想根据裁剪区域大小生成图像。我希望裁剪图像的宽度和高度应该是动态的。请检查下面我的代码。

如果您只是指出我应该在哪里调整我的代码以生成具有实际裁剪区域宽度和高度的裁剪图像，我将非常感激

$('img').Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    setSelect: [100, 100, 50, 50]
});
function showPreview(c) {
    if (parseInt(c.w) > 0) {
    // Show image preview
    var imageObj = $("#content-container img.highlighted")[0];
    var canvas = $("#preview")[0];
    var context = canvas.getContext("2d");
    context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
    }
}
$('button.crop').click(function () {
       var can = document.getElementById('preview');
       var img = can.toDataURL("image/png");
       $('div').before('<img src="' + img + '" class="cropped highlighted" data-reset="' + thisAttr + '"/>');
   });

Answer 1

我想通了。基本上我使用了变量“c.w”和“c.h”，因为它们保存 Canvas 的动态高度和宽度。所以我只是将它们放在公共(public)变量中，然后在我生成图像的其他函数中使用它们。