zoukankan      html  css  js  c++  java
  • javascript缩放图片

    //javascript成比例缩放图片

    <script language="JavaScript">
    <!--
    var flag=false;
    function DrawImage(ImgD){
    var image=new Image();
    image.src=ImgD.src;
    if(image.width>0 &amp;amp;&amp;amp; image.height>0){
    flag=true;
    if(image.width/image.height>= 140/125){
    if(image.width>140){
    ImgD.width=140;
    ImgD.height=(image.height*140)/image.width;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    else{
    if(image.height>125){
    ImgD.height=125;
    ImgD.width=(image.width*125)/image.height;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    }
    }
    //-->
    </script>


    图片引用:
    <a target="_blank" href="images/<%=rsmallimg%>">
    <img src="images/<%=rsmallimg%>" onload="javascript:DrawImage(this);" alt="<%=rname%>" width="140" height="125" border="0" style="border: 1px solid #000000"></a><BR>

    //功能: 鼠标滚轮自由缩放, 图片大小自定义按比例缩小, 图片大小可在装入时初始化...

    <script language="javascript" type="text/javascript">
    function resizeimg(ImgD,iwidth,iheight) {
          var image=new Image();
          image.src=ImgD.src;
          if(image.width>0 && image.height>0){
             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;
                 }
         ImgD.style.cursor= "pointer"; //改变鼠标指针
         ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
        if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器,如果是IE
          ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开";
          ImgD.onmousewheel = function img_zoom() //滚轮缩放
          {
              var zoom = parseInt(this.style.zoom, 10) || 100;
              zoom += event.wheelDelta / 12;
              if (zoom> 0) this.style.zoom = zoom + "%";
              return false;
          }
          } else { //如果不是IE
                 ImgD.title = "点击图片可在新窗口打开";
              }
         }
    }
    </script>

      在需要实现等比缩放的图片上加上onload语句,图片装载时初始化大小。
      具体实现代码如下:
       <img name="" src="DSCN2152.JPG" onload="javascript:resizeimg(this,100,200)">

  • 相关阅读:
    C# DataConstruct 数据结构关于 Array,ArrayList,List,HashTable,Dictionnary的学习记录
    Moq 在.net Core 单元测试中的使用
    记录一些 APM 仓储
    .net core Swagger 过滤部分Api
    C# Conversion Keywords
    (转载)C# 枚举 FlagsAttribute用法
    [慢更]Sublime Text 快捷键及使用过的插件
    Docker发布程序那些事
    RabbitMQ 学习日记
    Linux Tomcat7.0安装配置实践总结
  • 原文地址:https://www.cnblogs.com/ymyglhb/p/1317677.html
Copyright © 2011-2022 走看看