<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Upload2.aspx.cs" Inherits="Dotnet.Admin.Upload2" %>

<!DOCTYPE html  > 
<html>
<head runat="server">
    <title>裁剪图片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 
    <script src="../Javascript/jquery3.1.min.js"></script>
  <link href="../javascript/Jcrop/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
  <script src="../Javascript/Jcrop/js/jquery.Jcrop.min.js"></script>
        <link href="../layuiadmin/layui/css/layui.css" rel="stylesheet" />
</head>
<body style="color:#995533; font-size:12px; padding-left:20px; padding-top:20px; font-family:微软雅黑">
      
   <form id="cropForm" runat="server">

   <br />  
       拖动选取可以左右、上下、放大、缩小头像，尽量让头像清晰,然后单击右边的<b>“调整”</b><br />
    <br />

   
           
 <script type="text/javascript">

     jQuery(function ($) {

         // Create variables (in this scope) to hold the API and image size
         var jcrop_api, boundx, boundy;

         $('#target').Jcrop({
             onChange: updatePreview,
             onSelect: updatePreview,
             aspectRatio: <%=flashwidth %>/<%=flashheight %>,
                 setSelect: [0, 0, '<%=flashwidth %>','<%=flashheight %>']

         }, function () {
             // Use the API to get the real image size
             var bounds = this.getBounds();
             boundx = bounds[0];
             boundy = bounds[1];
             // Store the API in the jcrop_api variable
             jcrop_api = this;
         });

         function updatePreview(c) {
             if (parseInt(c.w) > 0) {
                 var rx = <%=flashwidth %> / c.w;
                 var ry = <%=flashheight %> / c.h;

                 var _x1= parseInt(c.x);
                 var _y1=parseInt(c.y);
                 var _x2=parseInt(c.x2);
                 var _y2=parseInt(c.y2);

                 $('#x1').val(_x1);
                 $('#y1').val(_y1);
                 $('#x2').val(_x2);
                 $('#y2').val(_y2);
                 $('#w').val(_x2-_x1);
                 $('#h').val(_y2-_y1);

                 $('#preview').css({
                     width: Math.round(rx * boundx) + 'px',
                     height: Math.round(ry * boundy) + 'px',
                     marginLeft: '-' + Math.round(rx * c.x) + 'px',
                     marginTop: '-' + Math.round(ry * c.y) + 'px'
                 });
             }
         };

     });


 </script>


   

 
 
    <div style="display:none">

   
x1<input type="text" id="x1" name="x1" /> 
x2<input type="text" id="x2"  name="x2"/> 
y1<input type="text" id="y1"  name="y1"/>
y2<input type="text" id="y2"  name="y2"/>
    
w<input type="text" id="w"  name="w"/>
h<input type="text" id="h"  name="h"/>
 </div>
	 




    <table>
        <tr valign="top">
            <td> 
              <img src="<%=orginFile%>"  id="target"   />
            </td>

            <td>
 

     <div style="width:200px; height:200px; overflow:hidden; margin:0px 30px"  >
			 <img  src="<%=orginFile%>"  id="preview"   /> 
    </div>

 <div style="margin-left:100px; margin-top:30px; ">
           <input type="button" onclick="GenImg()" value="裁剪图片"  class="layui-btn"/>	 
    </div>
            </td>
        </tr>

    </table>

     
     
                
              
  
 
    </form>

 

    <script>

        function GenImg() {
            var startX = $("#x1").val();
            var _x2 = $("#x2").val();

            var startY = $("#y1").val();
            var _y2 = $("#y2").val();

            var newWidth = $("#w").val();
            var newHeight = $("#h").val();

            var c = document.createElement('canvas');
            var ctx = c.getContext("2d");
            c.width = 200;
            c.height = 200;

            var imgObj = document.getElementById("target");
            ctx.drawImage(imgObj, startX, startY, newWidth, newHeight, 0, 0, 200, 200);

            var base64 = c.toDataURL('image/jpeg', 1.0);

            $.ajax({
                url: "ajax/save_fm.aspx",
                data: { base64: base64 },
                type: "post",
                cache: false,
                async: false,
                success: function (r) {
                    
                    window.opener.ResetImg(r,'<%=orginFile%>');
                    window.close();

                }
            });



        }
    </script>
</body>
</html>