您的位置：首页 > Web前端 > JQuery

模拟上传头像支持截图

2015-12-08 18:52 603 查看

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

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

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery javascript

相关文章推荐

新的分享

章节导航