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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

  <head>

   <title> ResizeImage </title>

   <meta name="Author" content="Ryan Shaw">

   <meta name="Keywords" content="Javascript,js,css,img,margin,onload,onchange">

   <meta name="Description" content="image preview and autoresize">

   <style type="text/css">

     .form-txt {

         height: 22px;

         padding-left: 3px;

         line-height: 22px;

         background-color: #FFFFFF;

         border: 1px solid #BBBBBB;

         vertical-align: middle;

         width: 200px;

         color: #666;

         font-size: 12px;

     }

     .release-hd{ background:#FFFFFF; border:1px solid #e5e5e5; padding:15px;}

     .item { margin:0 auto; padding-bottom: 10px; overflow: hidden; height:24px;}

     .item-name { float: left; font-size: 12px; padding-right: 8px; padding-top: 0px; text-align: right; width: 100px; color:#617b24; font-weight:700;}

   </style>

   <script type="text/javascript">

     // 不喜欢定义全局变量的同学可以不在这儿定义，我没有使用，用起来的话要好些个人认为

     var MAX_WIDTH = 300; // 最大宽度

     var MAX_HEIGHT = 200; // 最大高度

     // 预览图片

     function previewImage(file,order)

     {

       var div = document.getElementById("preview");

       if (file.files && file.files[0])

       {

         div.innerHTML = "<img id=\"imghead\">";

         var img = document.getElementById("imghead");

         var reader = new FileReader();

         reader.onload = function(evt){

             AutoResizeImage(300,200,img,evt.target.result);

         }

         reader.readAsDataURL(file.files[0]);

       }

       else

       {

         div.innerHTML = "<img id=\"imghead\">";

         var img = document.getElementById("imghead");

         AutoResizeImage(300,200,img,file.value);

       }

     }

     // 缩放图片，imgSrc用户延迟加载图片url

     function AutoResizeImage(maxWidth,maxHeight,objImg,imgSrc){

         var img = new Image();

         img.src = imgSrc || objImg.src;

         var hRatio;

         var wRatio;

         var Ratio = 1;

         var w = img.width;

         var h = img.height;

         wRatio = maxWidth / w;

         hRatio = maxHeight / h;

         if (maxWidth ==0 && maxHeight==0){

         Ratio = 1;

         }else if (maxWidth==0){

         if (hRatio<1) Ratio = hRatio;

         }else if (maxHeight==0){

         if (wRatio<1) Ratio = wRatio;

         }else if (wRatio<1 || hRatio<1){

         Ratio = (wRatio<=hRatio?wRatio:hRatio);

         }

         if (Ratio<1){

         w = w * Ratio;

         h = h * Ratio;

         }

         objImg.style.height = Math.round(h) + "px";

         objImg.style.width = Math.round(w) + "px";

         if(h < maxHeight) { // 纵向有空余空间

             objImg.style.marginTop = Math.round((maxHeight - h) / 2) + "px";

         }

         if(w < maxWidth) { // 横向有空余空间

             objImg.style.marginLeft = Math.round((maxWidth - w) / 2) + "px";

         }

         if(!!!objImg.src)

             objImg.src = imgSrc;

     }

   </script>

  </head>

  <body>

   <div class="release-hd">

     <table>

         <tbody>

             <tr>

                 <td>

                     <p class="item">

                         <label class="item-name">图片：</label>

                         <input class="form-txt" type="file" name="adPic" onchange=previewImage(this)>

                     </p>

                     <p class="item">

                         <label class="item-name">链接：</label>

                         <input class="form-txt" type="text" name="adUrl" value="">

                     </p>

                     <p class="item" style="height:72px">

                         <label class="item-name">主题：</label>

                         <textarea name="adTitle" cols=30 rows=10 style="height:66px" maxlength="250" class="form-txt"></textarea>

                     </p>

                         <span style="height:26px; font-weight:700; line-height:26px;color:#030; border:solid 1px #666;float:right; margin-right:10px;">

                             <input type="button" style="height:26px;border: 0 none;color:#006600; width:60px;" value="保存" />

                         </span>

                 </td>

                 <td>

                     <div id="preview">

                         <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)>

                     </div>

                 </td>

             </tr>

         </tbody>

     </table>

   </div>

  </body>

 </html>

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

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

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

欢迎您移步我们的交流群，无聊的时候大家一起打发时间：

或者通过QQ与我联系：

（最后编辑时间2013-08-20 23:08:39）

纯JS实现图片预览与等比例缩放和居中的更多相关文章

  1. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  2. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  3. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  4. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  6. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  8. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  9. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. fetch使用的常见问题及其解决办法

    摘自: https://segmentfault.com/a/1190000008484070 fetch使用的常见问题及其解决办法 javascript wonyun 2月25日发布 |   0 收 ...

  2. GeoHash原理和可视化显示

    最近在做附近定位功能的产品,geohash是一个非常不错的实现方式.查询资料,发现阿里的这篇文章讲解的很好.但文中并没有给出geohash显示的工具.无奈,也没有查到类似的.只好自己简单显示一下,方便 ...

  3. Java高编译低运行错误(ConcurrentHashMap.keySet)

    Java高编译低运行错误(ConcurrentHashMap.keySet) 调了一天: https://www.jianshu.com/p/f4996b1ccf2f

  4. 学习Spring-Session+Redis实现session共享

    1.添加依赖 <dependency> <groupId>org.springframework.session</groupId> <artifactId& ...

  5. .NET 并行编程——数据并行

    本文内容 并行编程 数据并行 环境 计算 PI 矩阵相乘 把目录中的全部图片复制到另一个目录 列出指定目录中的所有文件,包括其子目录 最近,对多线程编程,并行编程,异步编程,这三个概念有点晕了,之前我 ...

  6. npm install node-sass失败

    Cannot download "https://github.com/sass/node-sass/releases/download/v3.8.0/win32-x64-46_bindin ...

  7. Attempt to present <TestViewController2: 0x7fd7f8d10f30> on <ViewController: 0x7fd7f8c054c0> whose view is not in the window hierarchy!

    当 storyboard里面的 按钮 即连接了 类文件里面的点击方法  又  连接了   storyboard里 另一个  控制器的  modal 就会出现类似Attempt to present & ...

  8. IntelliJ IDEA的配置优化

    IntelliJ IDEA的配置优化 我们安装完IntelliJ IDEA之后,在弹出的欢迎页面下方点击Configure,选择Setting,打开以下界面,我们在这个界面中进行配置. Appeara ...

  9. Chrome F12 温故而知新 ：因为重定向导致清空Network信息

    虽然我以前都是用Fiddler 4来作为解决方案.但实际上可以勾选 [Preserve log]来保存日志 这样就不担心因为页面重定向导致清空了日志了

  10. 3D建模软件的选择（UG，Solidworks，ProE）

    转自:3D建模软件的选择(UG,Solidworks,ProE) 自述 咱是一个码农,和web.软件.控制台打交道太多了,很想玩玩炫的东西,于是学了点点PS,结果发现完全没有美术细胞TT.最近有碰到对 ...