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

 <!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. mock获取入参数并动态设置返回值

    /*   * Copyright (c) 2007 Mockito contributors   * This program is made available under the terms of ...

  2. angularjs drag and drop

    angular-dragula Drag and drop so simple it hurts 480 live demo angular-drag-and-drop-lists Angular d ...

  3. SpringBoot 2.x 整合ElasticSearch的demo

    SpringBoot 2.x 整合ElasticSearch的demo 1.配置文件application.yml信息 # Tomcat server: tomcat: uri-encoding: U ...

  4. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  5. python requests库使用

    迫不及待了吗?本页内容为如何入门 Requests 提供了很好的指引.其假设你已经安装了 Requests.如果还没有,去安装一节看看吧. 首先,确认一下: Requests 已安装 Requests ...

  6. [Big Data - Codis] Codis集群的搭建与使用

    一.简介 Codis是一个分布式的Redis解决方案,对于上层的应用来说,连接Codis Proxy和连接原生的Redis Server没有明显的区别(不支持的命令列表),上层应用可以像使用单机的Re ...

  7. Android ShareUserId 使用总结

    今天讲一下Android里面经常看到却不太留意的知识点——ShareUserId,在Android里面每个app都有一个唯一的linux user ID,则这样权限就被设置成该应用程序的文件只对该用户 ...

  8. swift 遍历枚举

      // see at http://swifter.tips/enum-enumerate/ // 貌似有些空格在粘贴的时候没有了...    = =! import Foundation   en ...

  9. MT7601 AP模式移植

    MT7601 的 STA 模式和 AP 模式的驱动,是不一样的. 所以,需要另外移植驱动 驱动源码位置 https://github.com/eywalink/mt7601u 下载之后,先修改 Mak ...

  10. c# 调用非托管c++dll 参数问题（转）

    在C#中调用C(C++)类的DLL的时候,有时候C的接口函数包含很多参数,而且有的时候这些参数有可能是个结构体,而且有可能是结构体指针,那么在C#到底该如何安全的调用这样的DLL接口函数呢?本文将详细 ...