如何通过调整大小使用 Jcrop 裁剪大图像？

Posted 2023-02-25

【中文标题】如何通过调整大小使用 Jcrop 裁剪大图像？

【英文标题】：How to crop a large image using Jcrop by resizing it?

【发布时间】：2017-02-21 11:21:55

【问题描述】：

我正在尝试通过设置自定义的高度和宽度属性来使用 Jcrop 裁剪大图像。我在 Jcrop 中尝试了很多选项，但似乎没有任何效果。这是我的代码：

html：

<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
    <tr>
        <td>
            <img id="Image1" src=""  style="display: none; height:600px; width:600px;" />
        </td>
        <td>
            <canvas id="canvas"  ></canvas>
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />

jquery：

$(document).delegate('#cover-image','change', function(e)
        var reader = new FileReader();
        reader.onload = function (e) 
            $('#Image1').show();
            $('#Image1').attr("src", e.target.result);
            $('#Image1').Jcrop(
                setSelect: [ 0,0,600,180 ],
                aspectRatio: 10/3,
                boxWidth: 600,
                boxHeight: 600,
                trueSize: [600, 600],
                onChange: SetCoordinates,
                onSelect: SetCoordinates
            );
        

        reader.readAsDataURL($(this)[0].files[0]);      
    );

    $('#btnCrop').click(function () 
        var x1 = $('#imgX1').val();
        var y1 = $('#imgY1').val();
        var width = $('#imgWidth').val();
        var height = $('#imgHeight').val();
        var canvas = $("#canvas")[0];
        var context = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () 
            canvas.height = 180;
            canvas.width = 600;
            context.drawImage(img, x1, y1, width, height, 0, 0, canvas.width, canvas.height);
            $('#imgCropped').val(canvas.toDataURL());
            $('#btnCrop').hide();
        ;
        img.src = $('#Image1').attr("src");
    );
);

function SetCoordinates(c) 
    $('#imgX1').val(c.x);
    $('#imgY1').val(c.y);
    $('#imgWidth').val(c.w);
    $('#imgHeight').val(c.h);
    $('#btnCrop').show();
    $('#save-cropped-image, #delete-image').hide();
;

我正在尝试裁剪一个比图像短的 div 中的大图像，因此图像在其中被压缩。但是当我裁剪这个图像时，它没有返回正确的坐标，并且画布中没有生成正确的图像。

我被困在 4 小时内。任何形式的帮助将不胜感激。 谢谢！

【问题讨论】：

请查看deepliquid.com/content/Jcrop_Manual.html

我已经看到了这个文档。但没有找到完美的解决方案。

【参考方案1】：

使用此代码。获取图片的原始尺寸，然后裁剪。

$(document).delegate('#cover-image','change', function(e)
            var reader = new FileReader();
            reader.onload = function (e) 
                $('#Image1').attr("src", e.target.result);
                var $img = $("#Image1");
                $img.hide().removeClass("image12");
                var w = $img.width();
                var h = $img.height();
                $('#Image1').Jcrop(
                    trueSize: [w, h],
                    onChange: SetCoordinates,
                    onSelect: SetCoordinates
                );
            

            reader.readAsDataURL($(this)[0].files[0]);      
        );

<style type="text/css">
.image12
   height:600px; 
   width:600px;

</style>

<img id="Image1" class="image12" src=""  style="display: none; " />

【参考方案2】：

这是裁剪 div 的小技巧...将要裁剪的 div 放入另一个 div 中。设置外部 div 的溢出以隐藏它们只需移动内部 div 即可使用 margin_left 裁剪它，右、上、下属性...

简单:)