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

<!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 id="Head1" runat="server">
    <title>上传图片第三步：设定小图图片</title>
<script src="../JavaScript/jquery-1.12.4.min.js"></script>
    <script src="../JavaScript/Jcrop/js/jquery.Jcrop.min.js" type="text/javascript"></script>
    <link href="../JavaScript/Jcrop/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
   
    
 <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: 0.75,
             setSelect: [000, 000, 200, 250]

         }, 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 = 200 / c.w;
                 var ry = 250 / c.h;


                 $('#x1').val(c.x);
                 $('#y1').val(c.y);
                 $('#x2').val(c.x2);
                 $('#y2').val(c.y2);
                 $('#w').val(c.w);
                 $('#h').val(c.h);

                 $('#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>


		 
</head>
<body>
    <form id="cropForm" runat="server">
   


    <asp:Label ID="imgsmall" runat="server"   Visible=false Text="ctl00_ContentPlaceHolder1_image_small"></asp:Label> 
    <asp:Label ID="imgbig" runat="server" Visible=false Text="ctl00_ContentPlaceHolder1_image_big"></asp:Label>
  
   
           
      Step 2/2:拖动选取可以左右、上下、放大、缩小头像，尽量让头像清晰,然后单击右边的<b>“调整”</b><br />

 
<div id="outer">


<input type="hidden" id="x1" name="x1" /> 
<input type="hidden" id="x2"  name="x2"/> 
<input type="hidden" id="y1"  name="y1"/>
<input type="hidden" id="y2"  name="y2"/>

<input type="hidden" id="w"  name="w"/>
<input type="hidden" id="h"  name="h"/>

		<table>
			<tr>
				<td>
						<img src=<%Response.Write(Session["orginFile"]) ;%>  id="target" alt="Flowers" />

                        &nbsp;&nbsp;&nbsp;&nbsp;
				</td>
				
                
                
                <td valign="top">
					<div style="width:200px;height:250px;overflow:hidden;"  >
						<img src=<%Response.Write(Session["orginFile"]) ;%>  id="preview" alt="Preview" />
                       
					</div>
                      <asp:Button ID="Button1" OnClick="Button1_Click" runat="server" Text="调整" />
				</td>
			</tr>
		</table>
   
 
		</div>


    </form>
</body>
</html>