1

我想知道如何在上传图像之前设置最大宽度和最大高度。因此，当您单击选择文件时，您选择了您的图片并加载它以便您查看它。然后你裁剪它，然后最终选择上传将它保存在一个目录中，现在我的问题是如何设置最大宽度和最大高度，然后在选择选择文件后在提示时选择它后有机会预览它。

一旦你选择你的文件如果图像高于最大高度和最大宽度抛出一条消息并要求他们提供更小的图片

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
    });
});
4

2 回答 2

0

这是您需要编辑的部分

纵横比：'1：1'，

试试这个 aspectRatio: '1:1.3',

你会看到种植面积的比例会改变

于 2014-01-22T15:06:20.103 回答
-1

您是否使用 Jcrop 裁剪图像？如果是，那么他们提供了限制 maxWidth 和 maxHeight 的参数。

如果您使用自定义 div 将预览图像重叠为裁剪区域，则将 maxwidth 和 maxheight 设置为该 div。

例如。

setSelect: [ 50, 50, 274, 196 ],
                maxSize: [224, 146],
                minSize: [224, 146],
于 2013-10-04T06:18:40.033 回答