Как установить максимальную ширину и максимальную высоту изображения перед загрузкой

Мне было интересно, как я могу установить максимальную ширину и максимальную высоту перед загрузкой изображения. Поэтому, когда вы нажимаете на выбранный файл, вы выбираете свое изображение, и оно загружается, чтобы вы могли его увидеть. Затем вы обрезаете его, а затем в конечном итоге выберите «Загрузить», чтобы сохранить его в каталоге, теперь мой вопрос: как установить максимальную ширину и максимальную высоту, прежде чем вы получите возможность просмотреть ее после того, как вы выберете ее в приглашении после выбора файла выбора.Как установить максимальную ширину и максимальную высоту изображения перед загрузкой

После того, как Вы выбираете свой файл, если изображение выше максимальной высоты и максимальная ширина Бросить сообщение и попросить у них меньшего изображения

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 plugin] (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, накладывающийся на предварительно просматриваемое изображение asa acropped region, тогда установите 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

да, точно .. но, пожалуйста, confitm, что эти параметры принимаются прототипом, который вы используете. Мой код ограничит пользователя выбором выделенной области по максимуму. – Rayon

это часть вам нужно отредактировать

AspectRatio: '1: 1',

попробовать, как этот AspectRatio: '1: 1,3',

вы увидите отношение зоны обжатия изменится

источник

2014-01-22 15:06:20 user1192280

Как установить максимальную ширину и максимальную высоту изображения перед загрузкой

ответ

Смежные вопросы