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

我想知道如何在圖像上傳之前設置最大寬度和最大高度。所以當你點擊選擇文件時，你選擇你的圖片並加載它，這樣你就可以看到它。然後你裁剪它然後最終選擇上傳將它保存在一個目錄中現在我的問題是我怎麼能設置最大寬度和最大高度，然後在選擇選擇文件後在提示時選擇它之前有機會預覽它。如何在上傳前設置圖像的最大寬度和最大高度

一旦你選擇你的文件，如果圖像比最大高度和最大寬度更高拋出一個消息讓他們對較小的圖片

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

來源

2013-10-04 ThinkkSo

您可以使用[Jquery FileUpload插件]（http://blueimp.github.io/jQuery-File-Upload/）的其他建議。這是很容易使用和適用於你的情況 –

@DrixsonOseña檢查出來http://demo.w3bees.com/jquery-image-crop/ – ThinkkSo

@DrixsonOseña選擇一張照片，一旦你做你可以查看它，然後立即裁剪在照片可見之前，我想知道如何檢查寬度和高度，並檢查它是否高於最大寬度和高度 – ThinkkSo

-1

您是否使用Jcrop裁剪圖像？如果是，那麼他們已經提供了限制maxWidth和maxHeight的參數。如果您使用的自定義div與預覽圖像重疊作爲一個受到刺激的區域，然後將maxwidth和maxheight設置爲該div。

例如。

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

來源

2013-10-04 06:18:40 Rayon

@ThinkkSo，請參閱文檔。我猜你需要在PHP中做，這很容易 –

$（'img＃uploadPreview'）。imgAreaSelect（{設置作物比例（可選） aspectRatio：'1：1'， maxSize：[224,146 ]， minSize：[224,146]， onSelectEnd：setInfo， }）; – Rayon

是的，但是請確保這個參數被你正在使用的原型所接受.. 我的代碼會限制用戶選擇最大的分配區域.. – Rayon

這是你需要編輯

的aspectRatio部分： '1：1'，

嘗試這樣的aspectRatio： '1：1.3'，

你會看到裁剪區域的比例將改變

來源

2014-01-22 15:06:20 user1192280

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

回答

相關問題