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

更新时间：2015年11月29日 14:00:46 投稿：mrr

这篇文章主要介绍了基于javascript代码实现通过点击图片显示原图片的相关资料,需要的朋友可以参考下

废话不多说了，直接给大家贴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>

您可能感兴趣的文章:

小程序模实现糊搜索功能
这篇文章主要为大家详细介绍了小程序模实现糊搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
uniapp时间格式化处理实现
本文主要介绍了uniapp时间格式化处理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
javascript 模拟JQuery的Ready方法实现并出现的问题
今天在阅读网上一些模拟Jq的ready方法时，发现一些小细节，就是网上的ready事件大部分都是在onload事件执行后加载，而jquery确能在onload加载前。
2009-12-12
原生js实现中奖信息无间隙滚动效果
本文主要分享了原生js实现中奖信息无间隙滚动效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
小程序实现录音功能
这篇文章主要为大家详细介绍了小程序实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
在js(jquery)中获得文本框焦点和失去焦点的方法
文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点，加一种是利用jquery $("p").blur(); 或$("p").blur(fn)来实现，有需要的朋友可以参考一下
2012-12-12
Android 自定义view仿微信相机单击拍照长按录视频按钮
这篇文章主要介绍了Android 自定义view仿微信相机单击拍照长按录视频按钮，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-07-07
微信小程序实现弹出菜单
这篇文章主要为大家详细介绍了微信小程序实现弹出菜单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
如何使用js正则表达式验证文件夹名是否符合规范
众所周知正则表达式非常强大,下面这篇文章主要给大家介绍了关于如何使用js正则表达式验证文件夹名是否符合规范的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
在Javascript里访问SharePoint列表数据的实现方法
在进行SharePoint订制的时候经常会遇到开发手段受限制的问题，比如通常公司都会限制服务器的访问以及部署，很多开发都只能够在客户端来进行
2011-05-05