模拟上传头像支持截图

来源：互联网发布：看电视的软件大全编辑：程序博客网时间：2024/05/16 03:59

网上资源很多，截图方面，有一个类库jcrop，效果很好，上传图片功能用js，是在网上找的，挺简洁。

把这两者整合一下就行了。

js的链接是http://www.codefans.net/articles/1395.shtml

jcrop链接是http://code.ciaoca.com/jquery/jcrop/

jcrop的链接里面还附了使用方法。

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/uploadimage.css"></link><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.Jcrop.js"></script>  <script type="text/javascript">  function cutImage(){  $("#imghead").Jcrop({  onChange:showPreview,  onSelect:showPreview,  aspectRatio:1  });  }  function showPreview(coords){  $("#crop_preview").attr("src",$("#imghead").attr("src"));  if(parseInt(coords.w) > 0){  var rx = $("#preview_box").width() / coords.w;   var ry = $("#preview_box").height() / coords.h;  $("#crop_preview").css({  width:Math.round(rx * $("#imghead").width()) + "px",  height:Math.round(rx * $("#imghead").height()) + "px",  marginLeft:"-" + Math.round(rx * coords.x) + "px",  marginTop:"-" + Math.round(ry * coords.y) + "px"  });  }  }    function previewImage(file){  var MAXWIDTH  = 300;  var MAXHEIGHT = 300;  var div = document.getElementById('preview');  div.innerHTML="";  if (file.files && file.files[0])  {      div.innerHTML = "<img width='300' height='300' border='0' id='imghead' onmouseover='cutImage()'><span id='preview_box' class='crop_preview'><img id='crop_preview' src='images/upload.jpg' /></span>";    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  {    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';    file.select();    var src = document.selection.createRange().text;    div.innerHTML = "<img width='300' height='300' border='0' id='imghead' onmouseover='cutImage()'><span id='preview_box' class='crop_preview'><img id='crop_preview' src='images/upload.jpg' /></span>";    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;margin-left:"+rect.left+"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 class="box-lanrenzhijia"><h1>上传头像</h1><div id="part01-jscrop" class="part01-jscrop"><input type="file" onchange="previewImage(this)" /><br/><br/><br/><div id="preview"><img width="300" height="300" border="0" id="imghead" src="images/upload.jpg" /><span id="preview_box" class="crop_preview"><img id="crop_preview" src="images/upload.jpg" /></span></div></div>  </div>  </body>

0 0