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

如何在客户端自动调整图像以进行图像预览？

2 个答案: