JCrop 得到裁剪的宽度和高度

Posted 2023-02-25

【中文标题】JCrop 得到裁剪的宽度和高度

【英文标题】：JCrop get cropped width and height

【发布时间】：2014-10-16 22:30:33

【问题描述】：

我正在使用 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 + '"/>');
   );

【问题讨论】：

jcropped-get-cropped-image-height 的可能副本。

【参考方案1】：

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