Question

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

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

$('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'，因为它们保持画布的动态高度和宽度。所以我只是将它们放在公共变量中，然后在我生成图像的其他函数中使用它们。

JCrop获得裁剪宽度和高度

1 个答案: