如何使用Jcrop裁剪大图像

Question

假设我们要650 x 650张照片。在这种情况下，我们可以将jcrop框设置为该尺寸，以便可以以此尺寸剪切图像。但是，如果用户上传了非常大的照片，而我们被迫拥有650平方的照片。用户无法覆盖照片的适当空间并将其放入盒子中。我们可以解决这个问题吗？就像Instagram一样，如果图片太大，用户会拾取图片，并且用户仅使用带有图片边缘的框架。但是以这种方式，例如对于1080像素或1080像素，我们损失了大约500像素。谢谢

@section Scripts {
    <script src="~/AdminLayout/Scripts/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">

        var imageCropWidth = 0;
        var imageCropHeight = 0;
        var cropPointX = 0;
        var cropPointY = 0;
        var jcropApi;

        $(document).ready(function () {
        });

        $("#hlcropImage").on("click", function (e) {

           e.preventDefault();
            cropImage();
        });

        function initCrop() {
            $('#imgEmpPhoto').Jcrop({
                onChange: setCoordsAndImgSize,
                aspectRatio: 1,
                setSelect: [0, 0, 640, 640],
                allowResize: true,
                onSelect: setCoordsAndImgSize,
            }, function () { jcropApi = this });
        }

        function showCoordinate() {
            $("#lblWidth").text(imageCropWidth + "px");
            $("#lblHeight").text(imageCropHeight + "px");
        }

        function setCoordsAndImgSize(e) {

            imageCropWidth = e.w;
            imageCropHeight = e.h;

            cropPointX = e.x;
            cropPointY = e.y;

            $("#lblWidth").text(imageCropWidth + "px");
            $("#lblHeight").text(imageCropHeight + "px");
        }

        function cropImage() {

            if (imageCropWidth == 0 && imageCropHeight == 0) {
                alert("Please select crop area.");
                return;
            }

            var img = $("#imgEmpPhoto").attr("src");

            showCroppedImage();
        }

        function showCroppedImage() {
            var x1 = cropPointX;
            var y1 = cropPointY;

            var width = imageCropWidth;
            var height = imageCropHeight;
            var canvas = $("#canvas")[0];
            var context = canvas.getContext('2d');
            var img = new Image();
            img.onload = function () {
                canvas.height = height;
                canvas.width = width;
                context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
                $('#avatarCropped').val(canvas.toDataURL());
            };
            img.src = $('#imgEmpPhoto').attr("src");
        }

        function readFile(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                if (jcropApi != null) {
                    jcropApi.destroy();
                }
                reader.onload = function (e) {
                    $('#imgEmpPhoto').attr('src', "");
                    var img = $('#imgEmpPhoto').attr('src', e.target.result);

                    var width = img[0].height;
                    var height = img[0].width;
                    $("#lblWidth").text(width + "px");
                    $("#lblHeight").text(height + "px");

                    initCrop();
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $('#flPhoto').change(function () {
            readFile(this);
        });
    </script>
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form asp-action="Create" method="post" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" name="RecipeId" value="@ViewBag.RecipeId" />
    <div class="form-group">

        <input type="text" disabled value="@ViewBag.Title" class="form-control" />
    </div>
    
    <div class="row">
       
            <label class="control-label">select one pic</label>

            <div class="col-md-12">
                <div id="gallery">
                    <div class="row">
                        <div class="form-group">

                            <input type="file" id="flPhoto" name="ImageUpload">

                            <span asp-validation-for="ImageUpload" class="text-danger"></span>
                            <a href="#" id="hlcropImage" class="btn btn-common mb-2">crop image</a>

                            <div class="col-md-6 col-lg-2" style="height:650px; width:650px; overflow:auto;">
                                <img class="img-fluid" id="imgEmpPhoto">
                            </div>
                            <canvas id="canvas" height="5" width="5" style="vertical-align:top;"></canvas>

                        </div>
                        <p>
                            <img id="imgCropped" src="#" style="display:none;">
                        </p>

                        <input type="hidden" name="avatarCropped" id="avatarCropped">


                    </div>

                </div>
            </div>

       
    </div> 
    
    
    <div class="row">

        <div class="col-md-6">
            <div class="form-group">
                <input type="text" name="Name" />
            </div>

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <input type="text" name="Description" />

            </div>
        </div>
    </div>
    <div class="form-group">
            <input type="submit" value="submit" class="btn btn-success" />
    </div>
</form>