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

 <!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. ASP.NET Core -中间件(Middleware)使用

    ASP.NET Core开发,开发并使用中间件(Middleware). 中间件是被组装成一个应用程序管道来处理请求和响应的软件组件. 每个组件选择是否传递给管道中的下一个组件的请求,并能之前和下一组 ...

  2. CustomJsonDateDeserializer @JsonDeserialize(using = CustomJsonDateDeserializer.class) Jackson 反序列化Date时遇到的问题 java中json日期属性反序列化

    public class CustomJsonDateDeserializer extends JsonDeserializer<Date> { @Override public Date ...

  3. 4种事务的隔离级别，InnoDB怎样巧妙实现？

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/z50L2O08e2u4afToR9A/article/details/82186189 事务ACID ...

  4. 《Unix&Linux大学教程》学习笔记七：进程与作业控制

    1:进程:一个内存中的程序+程序所需数据+管理程序的各种状态信息. 2:进程由内核进行管理,内核使用调度器,给予进程一个时间片来运行,然后切换到下一个进程. 3:进程分叉 fork :创建一个子进程 ...

  5. PHP 通过带SSL的SMTP 发送邮件的处理

    客户端与SMTP服务器的通讯, 是通过固定的命令以及返回编号完成的. 发送Email, 需要经过的步骤有创建socket (区分带ssl, 还是不带ssl)执行命令, 并检查返回值是否与预期一致, 不 ...

  6. Mac下用zsh

    最近好多实验要跑,有时候Finder切换来切换去,感觉还不如用terminal. Mac默认的shell是bash.所以说我其实今天才弄明白shell和terminal之间的关系.在人和计算机内核之间 ...

  7. apache的性能调配 MaxClients 与MaxRequestsPerChild

    因近期服务不稳定,现象和这个比较类似http://hi.baidu.com/xinfeng999/blog/item/1aea470e214ab1cd7acbe1ed.html根据现象来对APACHE ...

  8. JS 引擎执行机制

    JS JS 是单线程语音 JS 的 Event Loop 是 JS 的执行机制.类似于 Android Handler 消息分发机制 JS 单线程 技术的出现都跟现实世界里的应用场景密切相关 JS 单 ...

  9. 揭开Redis的神秘面纱

    本篇博文将为你解开Redis的神秘面纱,通过阅读本篇博文你将了解到以下内容: 什么是Redis? 为什么选择 Redis? 什么场景下用Redis? Redis 支持哪些语言? Redis下载 Red ...

  10. 模仿Semaphore自定义自己的 信号量

    简介 这里模仿Semaphore,自定义自己的信号量,利用AQS共享模式 1.MySemaphore.java package com.jacky; import java.util.concurre ...