hacke2/cutPic.aspx

## cutPic.aspx
<%@ 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>
	<%@ 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>