• JavaScript,等比例缩放图片的函数,很好用。


    在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真。
        我的需求如下:
            1、预先定义好图片显示的标准宽度和高度。
            2、如果图片的大小超过了标准定义,那么等比例压缩图片。
            3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。
            4、如果图片的大小小于标准定义,那么不对图片进行任何压缩处理。
        可能是我搜索的关键字不对吧,在网上找了很长时间,才找到,感觉很好使。代码如下

    代码
    <script language="JavaScript">
    <!--
    //图片按比例缩放
    var flag=false;
    function DrawImage(ImgD,iwidth,iheight){
        
    //参数(图片,允许的宽度,允许的高度)
        var image=new Image();
        image.src
    =ImgD.src;
        
    if(image.width>0 && image.height>0){
        flag
    =true;
        
    if(image.width/image.height>= iwidth/iheight){
            
    if(image.width>iwidth){  
            ImgD.width
    =iwidth;
            ImgD.height
    =(image.height*iwidth)/image.width;
            }else{
            ImgD.width
    =image.width;  
            ImgD.height
    =image.height;
            }
            ImgD.alt
    =image.width+"×"+image.height;
            }
        
    else{
            
    if(image.height>iheight){  
            ImgD.height
    =iheight;
            ImgD.width
    =(image.width*iheight)/image.height;        
            }else{
            ImgD.width
    =image.width;  
            ImgD.height
    =image.height;
            }
            ImgD.alt
    =image.width+"×"+image.height;
            }
        }

    //-->
    </script>
    调用:<img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">
  • 相关阅读:
    1703技术笔录
    技术开发感想
    1701技术随笔
    12月份技术随笔
    光照效果函数
    冰冻效果
    反色效果函数
    哈哈镜效果
    黑白效果函数
    羽化效果
  • 原文地址:https://www.cnblogs.com/wantingqiang/p/1667828.html
Copyright © 2020-2023  润新知