上傳前如何設置圖像的最大寬度和最大高度

Question

我想知道在上傳圖像之前如何設置最大寬度和最大高度。 因此，當單擊“選擇文件”時，將選擇圖片並加載它，以便可以看到它。 然后裁剪它，然后最終選擇上載以將其保存在目錄中。我的問題是，如何在選擇文件后出現提示時選擇它，然后才能設置最大寬度和最大高度，然后才有機會預覽它。

一旦選擇了文件（如果圖像高於最大高度和最大寬度），則會顯示一條消息，要求他們提供較小的圖片

HTML代碼：

<img id="uploadPreview" style="display:none;"/>

<!-- image uploading form -->
<form action="upload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/jpeg" name="image"/>
<input type="submit" value="Upload">

<!-- hidden inputs -->
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</form>

jQuery代碼：

function setInfo(i, e) {
    $('#x').val(e.x1);
    $('#y').val(e.y1);
    $('#w').val(e.width);
    $('#h').val(e.height);
}

$(document).ready(function() {
    var p = $("#uploadPreview");

    // prepare instant preview
    $("#uploadImage").change(function(){
        // fadeOut or hide preview
        p.fadeOut();

        // prepare HTML5 FileReader
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            p.attr('src', oFREvent.target.result).fadeIn();
        };
    });

    // implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
    $('img#uploadPreview').imgAreaSelect({
        // set crop ratio (optional)
        aspectRatio: '1:1',
        onSelectEnd: setInfo
    });
});

Answer 1

這是您需要編輯的部分

AspectRatio：“ 1：1”，

嘗試這樣的aspectRatio：“ 1：1.3”，

您會看到種植面積的比例將會改變

Answer 2

您是否正在使用Jcrop裁剪圖像？ 如果是，則他們提供了限制maxWidth和maxHeight的參數。

如果您正在使用自定義div將預覽圖像作為裁剪區域重疊，則將maxwidth和maxheight設置為該div。

例如。

setSelect: [ 50, 50, 274, 196 ],
                maxSize: [224, 146],
                minSize: [224, 146],