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

 <!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. JPA查询单个字段和多个字段返回类型总结

    原文地址:https://blog.csdn.net/weixin_40326509/article/details/80865646 在使用springboot中,需要使用JPQL和SQL去查询记录 ...

  2. 检测三种不同操作系统的Bash脚本

    检测三种不同操作系统(GNU/Linux, Mac OS X, Windows NT)的Bash脚本. 设计: 1.使用“uname”命令获取系统信息,带上“-s”参数个打印内核名称. 2.使用“ex ...

  3. phpstorm10使用服务激活

    现在官网已经更新到WebStorm 11.PhpStorm 10,找到一个很便捷的方法,不需要注册码了.安装完成,打开软件看到输入注册码界面的时候,切换到第二个选项,输入:http://idea.la ...

  4. 常用CTPN、CRNN文本检测识别框架

    一.SWT识别: yestinsong/Text-Detection( Text Detection System with MSER , SWT and Text Verification(fft ...

  5. 使用robot_pose_ekf对传感器信息融合

    robot_pose_ekf是ROS Navigation stack中的一个包,通过扩展卡尔曼滤波器对imu.里程计odom.视觉里程计vo的数据进行融合,来估计平面移动机器人的真实位置姿态,输出o ...

  6. Grails 第一课

    package helloworld import org.junit.*; import java.util.*; class HelloController { def index() { //d ...

  7. LaTeX ：font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  8. 一篇文章让你读懂iOS和Android的历史起源

    智能手机虽说是移动电话,但我们完全可以将其作为小型化的电脑来思考.这样一来也能够显示出智能手机OS的高性能.我们首先一起来回顾下智能手机OS的历史. OS的黎明期 其实在很早之前就已经有这样的想法,即 ...

  9. 【Windows】Windows中解析DOS的DIR命令使用

    总结一下cmd中的dir命令的用法 64位win10系统上,打印帮助文档. D:\test>dir /? 显示目录中的文件和子目录列表. DIR [drive:][path][filename] ...

  10. MySQL8的新特性ROLE

    [MySQL的ROLE解决了什么问题] 假设你是一个职业素养良好的DBA比较同时又比较注重权限管理的话:可能遇到过这样的问题,数据库中有多个开发人员的账号:有一天要建 一个新的schema,如果你希望 ...