Skip to content

Instantly share code, notes, and snippets.

@hacke2
Created Aug 25, 2014
Embed
What would you like to do?
管理学院图片裁剪
<%@ 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">选择比例:&nbsp;&nbsp;</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