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

2019-11-20 11:07:56

字体：大中小

来源：转载

供稿：网友

废话不多说了，直接给大家贴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数组学习笔记