基于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 相关文章推荐
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
js中关于Blob对象的介绍与使用
Nov 29 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP 数组基础知识小结
2010/08/20 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jQuery select控制插件
2009/08/17 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
精细化工应届生求职信
2013/11/17 职场文书
二手书店创业计划书
2014/01/16 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
应届生找工作求职信
2014/06/24 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python