zoukankan      html  css  js  c++  java
  • 纯JS实现图片预览与等比例缩放和居中

      最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中。已经保存的广告位图片显示时也要等比例缩放和居中。我使用了下面的代码实现,不过可能有一些小问题。

      1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      2 <html>
      3  <head>
      4   <title> ResizeImage </title>
      5   <meta name="Author" content="Ryan Shaw">
      6   <meta name="Keywords" content="Javascript,js,css,img,margin,onload,onchange">
      7   <meta name="Description" content="image preview and autoresize">
      8   <style type="text/css">
      9     .form-txt {
     10         height: 22px;
     11         padding-left: 3px;
     12         line-height: 22px;
     13         background-color: #FFFFFF;
     14         border: 1px solid #BBBBBB;
     15         vertical-align: middle;
     16         width: 200px;
     17         color: #666;
     18         font-size: 12px;
     19     }
     20     .release-hd{ background:#FFFFFF; border:1px solid #e5e5e5; padding:15px;}
     21     .item { margin:0 auto; padding-bottom: 10px; overflow: hidden; height:24px;}
     22     .item-name { float: left; font-size: 12px; padding-right: 8px; padding-top: 0px; text-align: right; width: 100px; color:#617b24; font-weight:700;}
     23   </style>
     24   <script type="text/javascript">
     25     // 不喜欢定义全局变量的同学可以不在这儿定义,我没有使用,用起来的话要好些个人认为
     26     var MAX_WIDTH = 300; // 最大宽度
     27     var MAX_HEIGHT = 200; // 最大高度
     28 
     29     // 预览图片
     30     function previewImage(file,order)  
     31     {
     32       var div = document.getElementById("preview");  
     33       if (file.files && file.files[0])  
     34       {  
     35         div.innerHTML = "<img id="imghead">";  
     36         var img = document.getElementById("imghead");
     37         var reader = new FileReader();  
     38         reader.onload = function(evt){
     39             AutoResizeImage(300,200,img,evt.target.result);
     40         }  
     41         reader.readAsDataURL(file.files[0]);  
     42       }  
     43       else  
     44       {
     45         div.innerHTML = "<img id="imghead">";  
     46         var img = document.getElementById("imghead");
     47         AutoResizeImage(300,200,img,file.value);
     48       }
     49     }
     50     
     51     // 缩放图片,imgSrc用户延迟加载图片url
     52     function AutoResizeImage(maxWidth,maxHeight,objImg,imgSrc){
     53         var img = new Image();
     54         img.src = imgSrc || objImg.src;
     55         var hRatio;
     56         var wRatio;
     57         var Ratio = 1;
     58         var w = img.width;
     59         var h = img.height;
     60         wRatio = maxWidth / w;
     61         hRatio = maxHeight / h;
     62         if (maxWidth ==0 && maxHeight==0){
     63         Ratio = 1;
     64         }else if (maxWidth==0){
     65         if (hRatio<1) Ratio = hRatio;
     66         }else if (maxHeight==0){
     67         if (wRatio<1) Ratio = wRatio;
     68         }else if (wRatio<1 || hRatio<1){
     69         Ratio = (wRatio<=hRatio?wRatio:hRatio);
     70         }
     71         if (Ratio<1){
     72         w = w * Ratio;
     73         h = h * Ratio;
     74         }
     75         objImg.style.height = Math.round(h) + "px";
     76         objImg.style.width = Math.round(w) + "px";
     77         
     78         if(h < maxHeight) { // 纵向有空余空间
     79             objImg.style.marginTop = Math.round((maxHeight - h) / 2) + "px";
     80         }
     81         if(w < maxWidth) { // 横向有空余空间
     82             objImg.style.marginLeft = Math.round((maxWidth - w) / 2) + "px";
     83         }
     84         if(!!!objImg.src)
     85             objImg.src = imgSrc;
     86     }
     87   </script>
     88  </head>
     89 
     90  <body>
     91   <div class="release-hd">
     92     <table>
     93         <tbody>
     94             <tr>
     95                 <td>
     96                     <p class="item">
     97                         <label class="item-name">图片:</label>
     98                         <input class="form-txt" type="file" name="adPic" onchange=previewImage(this)>
     99                     </p>
    100                     <p class="item">
    101                         <label class="item-name">链接:</label>
    102                         <input class="form-txt" type="text" name="adUrl" value="">
    103                     </p>
    104                     <p class="item" style="height:72px">
    105                         <label class="item-name">主题:</label>
    106                         <textarea name="adTitle" cols=30 rows=10 style="height:66px" maxlength="250" class="form-txt"></textarea>
    107                     </p>
    108                         <span style="height:26px; font-weight:700; line-height:26px;color:#030; border:solid 1px #666;float:right; margin-right:10px;">
    109                             <input type="button" style="height:26px;border: 0 none;color:#006600; 60px;" value="保存" />
    110                         </span>
    111                 </td>
    112                 <td>
    113                     <div id="preview">
    114                         <img id="imghead" width=300 height=200 border=0 src="http://su.bdimg.com/static/skin/img/logo_white.png" onload=AutoResizeImage(300,200,this)>
    115                     </div>
    116                 </td>
    117             </tr>
    118         </tbody>
    119     </table>
    120   </div>
    121  </body>
    122 </html>

      实际上我没有测试IE8以下浏览器,不过有人是使用了滤镜来做,如果IE6这样实现不了的话就只能用滤镜了。

      上面的代码其实只有一点需要注意:img的onload一定要在src设置之前绑定,不然不会被执行。特别是在谷歌等浏览器下。

      偷个懒,验证文件是否为图片什么的我没写了哦。

     欢迎您移步我们的交流群,无聊的时候大家一起打发时间:Programmer Union

     或者通过QQ与我联系:点击这里给我发消息

     (最后编辑时间2013-08-20 23:08:39)

  • 相关阅读:
    python中的编码问题
    CVPR2018 Tutorial 之 Visual Recognition and Beyond
    hdu 1376 Octal Fractions
    hdu 1329 Hanoi Tower Troubles Again!
    hdu 1309 Loansome Car Buyer
    hdu 1333 Smith Numbers
    hdu 1288 Hat's Tea
    hdu 1284 钱币兑换问题
    hdu 1275 两车追及或相遇问题
    hdu 1270 小希的数表
  • 原文地址:https://www.cnblogs.com/Johness/p/3271655.html
Copyright © 2011-2022 走看看