Как автоматически изменить размер изображения для предварительного просмотра изображения на стороне клиента?

Question

Я использую этот скрипт для отображения предварительного просмотра изображений для пользователей, когда они регистрируются на моем сайте. У меня он установлен на стороне клиента. Другими словами, изображение не загружается для предварительного просмотра.

Попытка автоматического изменения размера изображения, которое пользователь выбирает, чтобы сохранить его пропорции при отображении на странице. Максимальный размер 150x150.

<script type='text/javascript'>
function userImage(file) {
    if(document.all)
        document.getElementById('showImage').src = file.value;
    else
        document.getElementById('showImage').src = file.files.item(0).getAsDataURL();
    if(document.getElementById('showImage').src.length > 0)
        document.getElementById('showImage').style.display = 'block';
}
</script>

<input type='file' name='avatar' onchange='userImage(this);' />
<img id='showImage' style='display:none;' />

Answer 1

Изменено предложение на более простую модель.Обратите внимание, что IE может потребоваться, чтобы ваш сайт находился в доверенной зоне, чтобы он мог показывать изображение

<script type='text/javascript'>
function userImage(file) {
    var img = document.getElementById("img1");
    img.onload=function() { this.parentNode.style.display="" }
    img.src=(file.files)?file.files.item(0).getAsDataURL():file.value;
}
</script>

<input type="file" name="avatar" onchange="userImage(this);" />
<div id="showImage" style="display:none" ><img name="img1" id="img1" src="dummy.gif" width="150" /></div>

Answer 2

Если вы / можете использовать JQuery. Отметьте это для получения пропорциональной ширины, где вы пропустите ожидаемую высоту и рассчитаете пропорциональную ширину.

 function GetWidth(expectedHeight )
                {
                   var width = $("#showImage").width();
                   var height = $("#showImage").height();
                   var targetWidth = Math.round(expectedHeight * width / height);
                       $("#showImage").attr("width", targetWidth );
                       $("#showImage").attr("width", expectedHeight );

                }



 with javascript 

     function GetWidth(expectedHeight )
     {                      
     var img = document.createElement("img");
     var width = img.width;
     var height = img.height;
     var targetWidth = Math.round(expectedHeight * width / height);
     img.width=targetWidth ;
     img.height =  expectedHeight ;
    }