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

 <!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. Python打包方法——Pyinstaller

    Python版本:Python3.5.2 一.安装Pyinstaller 1.安装pywin32 下载安装文件:查找到跟自己适用的python版本及window系统版本匹配的pywin32,下载后安装 ...

  2. 学习率设置&&训练模型之loss曲线滑动平均

    tensorflow中学习率.过拟合.滑动平均的学习 tensorflow中常用学习率更新策略 TensorFlow学习--学习率衰减/learning rate decay 分段常数衰减 分段常数衰 ...

  3. Android添加全屏启动画面

    有的Android软件需要在启动的时候显示一个启动画面,可以是一张图或者一些设置什么呢,还有一个好处就是,可以趁机在后台加载数据.创建启动画面一般有两种方式:1.建立一个activity,展示启动画面 ...

  4. 【ZH奶酪】如何用sklearn计算中文文本TF-IDF？

    1. 什么是TF-IDF tf-idf(英语:term frequency–inverse document frequency)是一种用于信息检索与文本挖掘的常用加权技术.tf-idf是一种统计方法 ...

  5. getting-started-with-mqtt

    来自:https://dzone.com/refcardz/getting-started-with-mqtt SECTION 1 Why MQTT? The Internet of Things ( ...

  6. GDALSetProjection使用的一个注意事项

    GDALSetProjection 简述 GDALSetProjection是用来给GDALDataset设定投影信息(坐标系统)的接口,实际上是GDALDataset::SetProjection这 ...

  7. R中统计假设检验总结(一)

    先PS一个:考虑到这次的题目本身的特点 尝试下把说明性内容都直接作为备注写在语句中 另外用于说明的部分例子参考了我的教授Guy Yollin在Financial Data Analysis and M ...

  8. arcgis server瓦片行列号计算

    2013-08-01 arcgis server切图时会设置一个原点坐标,如果是经纬度坐标一般默认(x0,y0)=(-400,400)作为切图的起始点,即从这开始算行列号.假设切图的地图某点坐标为x, ...

  9. 你被R语言的=和<-搞昏了头吗

    学习R有一周了,心中一直有一个困惑,关于= 和 <-,今晚决定搞定它! 迄今为止用到最多的函数是matrix() 和c(),就用他们说起!   之前学了四五门语言,对于=赋值已经成了惯性,下面是 ...

  10. zookeeper的可视化web界面

    转载一篇我心中大神有关zookeeper  WEB的文章 以前写过一篇zookeeper集群搭建的文章<烂泥:zookeeper集群搭建>,最近在使用activemq集群过程中碰到了一些有 ...