在Jcrop中设置自定义高度和宽度后如何获取图像的原始高度和宽度

Question

我正在尝试使用 Jcrop 插件裁剪图像。上传的图像大于我想要的尺寸（600X600）。

我最初将图像尺寸设置为 600X600 以将其显示给用户，然后将其尺寸设置为原始高度和宽度。然后将原始高度和宽度设置为 Jcrop 的“trueSize”选项以获得正确的裁剪。

问题是我第一次没有得到正确的上传图片的原始高度和宽度。但是当我再次上传它而不清除缓存时，它工作正常。我想在第一时间获得图像的原始尺寸。这是我的代码：

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;" />
        </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){
        $('.update-img').hide();
        $('#Image1').hide();
        $('#loader1').show();
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#Image1').attr("src", e.target.result);
            var $img = $("#Image1");
            $img.hide().removeClass("image12");
            var width = $img.width();
            var height = $img.height();
            $img.addClass("image12").show();

            $('#Image1').Jcrop({
                setSelect: [ 0,0,600,180 ],
                aspectRatio: 10/3,
                trueSize: [width, height],
                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();
            $('#save-cropped-image, #delete-image, .preview').show();
        };
        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();
};

CSS：

.image12{
   height:600px; 
   width:600px;
}

如果有人知道答案，请尽快回复。谢谢！

Answer 1

在 jquery.js 文件中使用了这段代码

 $(document).delegate('#cover-image','change', function(e){
    $('.update-img').hide();
    $('#Image1').hide();
    $('#loader1').show();
    var reader = new FileReader();
    reader.onload = function (e) {      
        var image = new Image();
        //Set the Base64 string return from FileReader as source.
        image.src = e.target.result;
        $('#Image1').attr("src",image.src);

        image.onload = function () {
            var height = this.height;
            var width = this.width;
            // alert(height+"and"+width);
            var jcrop_api = $('#Image1').Jcrop({
                trueSize: [width, height],
                onChange: SetCoordinates,
                onSelect: SetCoordinates
            })
        }

    }
    reader.readAsDataURL($(this)[0].files[0]);
    // jcrop_api.destroy();
});