圖像的放大縮小處理

最新推荐文章于 2022-08-30 22:40:07 发布

un28700

最新推荐文章于 2022-08-30 22:40:07 发布

阅读量377

点赞数

分类专栏： HTML 文章标签： autocomplete input function image null url

本文链接：https://blog.csdn.net/un28700/article/details/4406832

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>

<script type="text/javascript">
    function resizeImg(photo,pWidth,pHeight){
        ///画像自分のサイズ小を取得
        var image = new Image();
        image.src = photo.src;
        if(image.width>0 && image.height>0){
            //縦なりゆき
            if(pHeight == null || pHeight == undefined || pHeight == ""){
                //画像サイズ小:元サイズ生きで表示。天地左右センタリング
                if(image.width <= pWidth){
                    photo.height = image.height;
                    photo.width = image.width;
                }else{
                    photo.width = pWidth;
                    photo.height = (image.height*pWidth)/image.width;
                }

            }else{
                if(image.width/image.height>= pWidth/pHeight){
                     if(image.width>pWidth){
                         photo.width=pWidth;
                         photo.height=(image.height*pWidth)/image.width;
                     }else{
                         photo.width=image.width;
                         photo.height=image.height;
                     }
                 } else{
                     if(image.height>pHeight){
                         photo.height=pHeight;
                         photo.width=(image.width*pHeight)/image.height;
                     }else{
                         photo.width=image.width;
                         photo.height=image.height;
                     }
                }
            }

            photo.align = "center";
            photo.style.verticalAlign = "middle";
        }

        photo.align = "center";
        photo.style.verticalAlign = "middle";

        document.getElementById("inline1").innerHTML="元Width:" + image.width;
        document.getElementById("inline2").innerHTML="元Height:" + image.height;

        document.getElementById("inline3").innerHTML="変更後Width:" + photo.width;
        document.getElementById("inline4").innerHTML="変更後Height:" + photo.height;

        document.getElementById("inline5").innerHTML="Width(%):" + image.width/photo.width;
        document.getElementById("inline6").innerHTML="Height(%):" + image.height/photo.height;
    }

    function change(){

        if(document.getElementById("kw").value != ""){
            //alert(document.getElementById("kw").value);
            document.getElementById("img").src=document.getElementById("kw").value;
            resizeImg(document.getElementById("img"),document.getElementById("w").value,document.getElementById("h").value);
        }

    }
</script>

</head>
<body>

<img id="img" src="http://profile.csdn.net/un28700/picture/3.jpg" alt=""/>
<br/><br/>
Width: <input value="540" id="w" type="text" maxlength="100" size="50" name="wd" autocomplete="off"/><br/>
Height: <input value="405" id="h" type="text" maxlength="100" size="50" name="wd" autocomplete="off"/><br/>
画像URL:<input value="http://profile.csdn.net/un28700/picture/3.jpg" id="kw" type="text" maxlength="100" size="150" name="wd" autocomplete="off"/><input id="sb" οnclick="change();" value="change"/>

<div id="inline1"></div><div id="inline3"></div><div id="inline5"></div>

<br/>

<div id="inline2"></div><div id="inline4"></div><div id="inline6"></div>

</body>
</html>

un28700

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圖像的放大縮小處理

function resizeImg(photo,pWidth,pHeight){ ///画像自分のサイズ小を取得 var image = new Image(); image.src = photo.src; if(image.width>0 && image.height>0)
复制链接

扫一扫