Question

我试图通过设置自定义的高度和宽度属性来使用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="" alt="" style="display: none; height:600px; width:600px;" />
        </td>
        <td>
            <canvas id="canvas" height="5" width="5"></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小时。任何一种帮助都将受到赞赏。谢谢！

Answer 1

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

TO_TIMESTAMP('2017-02-20 12:15:32','YYYY-MM-DD HH24:MI:SS')

Answer 2

这里是裁剪div的小技巧...把想要裁剪的div放在另一个div里面。设置外部div的溢出来隐藏它们只需移动内部div就像你想用margin_left裁剪它一样，右，上，下属......

简单：）

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

2 个答案: