基于javascript代码实现通过点击图片显示原图片


Posted in Javascript onNovember 29, 2015

废话不多说了,直接给大家贴js实现点击图片显示原图片的代码,具体代码如下所示:

function DrawImage(ImgD){
  var image = new Image();
  image.src=ImgD.src;
  var width = $(ImgD).attr("width");
  var height = $(ImgD).attr("height");
  if(width >100 && height>80){
    ImgD.width=100; 
    ImgD.height=80;
    ImgD.alt=image.width+"×"+image.height;
  }else{
    if(image.width>0 && image.height>0){
      flag=true;
      if(image.width>300 || image.height>200){
        ImgD.width=image.width/2; 
        ImgD.height=image.height/2;
        ImgD.alt=image.width+"×"+image.height;
      }else{
        ImgD.width=image.width;  
        ImgD.height=image.height;
        ImgD.alt=image.width+"×"+image.height;
      }
    }
  }
}

下面分享一段关于js实现上传图片及时预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>图片上传本地预览</title>   
<style type="text/css">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
        //图片上传预览  IE是用了滤镜。
    function previewImage(file)
    {
     var MAXWIDTH = 260; 
     var MAXHEIGHT = 180;
     var div = document.getElementById('preview');
     if (file.files && file.files[0])
     {
       div.innerHTML ='<img id=imghead>';
       var img = document.getElementById('imghead');
       img.onload = function(){
        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
        img.width = rect.width;
        img.height = rect.height;
//         img.style.marginLeft = rect.left+'px';
        img.style.marginTop = rect.top+'px';
       }
       var reader = new FileReader();
       reader.onload = function(evt){img.src = evt.target.result;}
       reader.readAsDataURL(file.files[0]);
     }
     else //兼容IE
     {
      var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
      file.select();
      var src = document.selection.createRange().text;
      div.innerHTML = '<img id=imghead>';
      var img = document.getElementById('imghead');
      img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
      var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
      status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
      div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
     }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
      var param = {top:0, left:0, width:width, height:height};
      if( width>maxWidth || height>maxHeight )
      {
        rateWidth = width / maxWidth;
        rateHeight = height / maxHeight;      
        if( rateWidth > rateHeight )
        {
          param.width = maxWidth;
          param.height = Math.round(height / rateWidth);
        }else
        {
          param.width = Math.round(width / rateHeight);
          param.height = maxHeight;
        }
      }     
      param.left = Math.round((maxWidth - param.width) / 2);
      param.top = Math.round((maxHeight - param.height) / 2);
      return param;
    }
</script>   
</head>   
<body>
<div id="preview">
  <img id="imghead" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
  <input type="file" onchange="previewImage(this)" />   
</body>   
</html>
Javascript 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
整理Javascript数组学习笔记
Nov 29 #Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 #Javascript
分享我的jquery实现下拉菜单心的
Nov 29 #Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 #Javascript
整理Javascript基础语法学习笔记
Nov 29 #Javascript
Jquery操作Ajax方法小结
Nov 29 #Javascript
jquery+php实现滚动的数字特效
Nov 29 #Javascript
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
分享10段PHP常用代码
2015/11/11 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
优秀应届生推荐信
2013/11/09 职场文书
初中生学习的自我评价
2013/11/14 职场文书
迟到检讨书300字
2014/02/14 职场文书
入党申请书怎么写?
2019/06/11 职场文书