管理学院图片裁剪
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> | |
<%String basePath = (Request.Url.Scheme + "://" + Request.Url.Authority + Request.ApplicationPath); | |
%> | |
<!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> | |
<base href="<%=basePath %>" /> | |
<title>CuttingPic</title> | |
<script type='text/javascript' src='Content/Scripts/Component/loadJsCss.js'></script> | |
<script type='text/javascript'> | |
loadJsCss("dialog"); | |
var pageData = { | |
cuttingPicPath: null | |
}; | |
var imgParameter = { | |
x: 0, | |
y: 0, | |
w: 0, | |
h: 0, | |
scaling: 0, | |
curW: 0, | |
curH: 0 | |
}; | |
</script> | |
<script type='text/javascript' src='Content/Scripts/Util/ImageUtil.js'></script> | |
<link rel="stylesheet" type="text/css" href="Content/CSS/Plugins/jcrop/jquery.Jcrop.css"/> | |
<script type='text/javascript' src='Content/Scripts/Jquery/jquery.Jcrop.js'></script> | |
<style type="text/css"> | |
table | |
{ | |
margin: 0 auto; | |
text-align:center; | |
} | |
</style> | |
</head> | |
<body> | |
<form id="form1" runat="server"> | |
<asp:ScriptManager ID="ScriptManager1" runat="server"> | |
<Scripts> | |
<asp:ScriptReference Path="~/Service/Util/SystemUtilService.svc/js" /> | |
</Scripts> | |
</asp:ScriptManager> | |
</form> | |
<div id="dialog-modal"> | |
<table> | |
<tbody> | |
<tr style="height:400px"> | |
<td><div id="oldpicDiv"><img id="oldpicImg" alt="裁剪图片"/></div></td> | |
</tr><!-- onload="AutoResizeImage(0, 400, this);"--> | |
<tr> | |
<td> | |
<label for="default">选择比例: </label> | |
<label> | |
<input id="switch-default" type="radio" name="switch" value=""/> | |
无限制 | |
</label> | |
<label> | |
<input type="radio" id="switch-hotNew" name="switch" value="2.857"/><!--3.609--> | |
热点新闻 | |
</label> | |
<label> | |
<input type="radio" id="Radio1" name="switch" value="1"/> | |
正方形图片 | |
</label></td></tr> | |
</tbody> | |
</table> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
var $cuttingPic = { | |
$oldpicImg: $("#oldpicImg") | |
}; | |
window.onload = function () { | |
$("#dialog-modal").createDialog({ | |
resizable: false, | |
title: "在线裁图", | |
modal: true, | |
winMode: ChildDialogUtil.getWinMode(), | |
close: function (event) { | |
if (!event.data) {//点击窗口关闭 | |
DialogUtil.getTopWindow().WindowManager.hiddenFlowWindow(); | |
return; | |
} | |
//点击【确定】 EVENT_OK情形下的关闭 | |
if (event.data.type == DialogUtil.EVENT_OK) { | |
ChildDialogUtil.doClose(DialogUtil.EVENT_OK, cutImg()); | |
} | |
//如果页面错误 会阻止关闭 | |
else if (event.data.type == DialogUtil.EVENT_ERROR) { | |
return; | |
} | |
//点击【退出】 EVENT_CANCEL情形的处理 | |
else { | |
ChildDialogUtil.doClose(DialogUtil.EVENT_CANCEL, false); | |
} | |
} | |
}); | |
Page.Data.exchangeData = ChildDialogUtil.getExchangeData(); | |
pageData.cuttingPicPath = Page.Data.exchangeData.cuttingPicPath; | |
//pageData.cuttingPicPath = "/Content/SystemFile/Images/News/2013-09-26/6351579163532711241f178a82b9014a909a59eb1ba9773912b31bee35.jpg"; | |
$cuttingPic.$oldpicImg.attr("src", pageData.cuttingPicPath).load(function () { | |
AutoResizeImage(0, 400, $("#oldpicImg")[0]); | |
imgParameter.curW = $(this).width(); | |
imgParameter.curH = $(this).height(); | |
resetImgInfo($(this), imgParameter.curW, imgParameter.curH); | |
}); | |
$cuttingPic.$oldpicImg.load(AutoResizeImage(0, 400, $cuttingPic.$oldpicImg[0])); | |
alert("请选择截图类型"); | |
var radios = $("td input[type=radio]"); | |
radios.change(function () { | |
imgParameter.scaling = this.value; | |
$('#oldpicImg').Jcrop({ | |
onChange: showCoords, | |
onSelect: showCoords, | |
aspectRatio: imgParameter.scaling | |
}); | |
}) | |
// $cuttingPic.$oldpicImg.attr("src", "/Content/SystemFile/Images/News/2013-09-11/6351451354970449481ad5ad6eddc451dabc99a24db6fd5266d016322c.jpg"); | |
//$("#newpicImg").attr("src", "/Content/SystemFile/Images/News/2013-09-11/6351451354970449481ad5ad6eddc451dabc99a24db6fd5266d016322c.jpg"); | |
}; | |
function showCoords(obj) { | |
imgParameter.x =obj.x; | |
imgParameter.y = obj.y; | |
imgParameter.w =obj.w; | |
imgParameter.h =obj.h; | |
} | |
//重设一下图片的 | |
function resetImgInfo(jqObj, width, height) { | |
jqObj.width(width).height(height).show(); | |
} | |
function cutImg() { | |
if (imgParameter.w != 0 && imgParameter.h != 0) { | |
SystemUtilService.CuttingImg(pageData.cuttingPicPath, imgParameter.x, imgParameter.y, imgParameter.w, imgParameter.h, imgParameter.curW, imgParameter.curH, function (data) { }); | |
} | |
else { | |
//alert(2); | |
} | |
return true; | |
} | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment