<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadCrop.aspx.cs" Inherits="ImageEx.UploadCrop" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/imgareaselect-default.css" rel="stylesheet"/> <script src="scripts/jquery.min.js"></script> <script src="scripts/jquery.imgareaselect.pack.js"></script> <script> $(document).ready(function () { $("#btnCrop").click(function () { $("#imgCrop").imgAreaSelect({ aspectRatio: "4:3", handles: true, onSelectEnd: function (img, selection) { $('X1').val(selection.X1); $('Y1').val(selection.Y1); $('X2').val(selection.X2); $('Y2').val(selection.Y2); } }); }) }); function preview(img, selection) { var scaleX = 100 / (selection.width || 1); var scaleY = 100 / (selection.height || 1); $('#imgCrop + div > img').css({ width: Math.round(scaleX * 400) + 'px', height: Math.round(scaleY * 300) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); } $(document).ready(function () { $('<div><img src="116.jpg" style="position:relative" /></div>') .css({ float: 'bottom', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' }) .insertAfter($('#imgCrop')); $('#imgCrop').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }) }); </script> <style type="text/css"> #btnCrop { width: 107px; } #SubmitCropped { width: 92px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Panel ID="pnlUpload" runat="server"> <asp:FileUpload ID="Upload" runat="server" /> <br /> <br /> <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" Width="101px" /> <br /> <asp:Label ID="LblError" runat="server" Text="Label" Visible="False"></asp:Label> </asp:Panel> <asp:Panel ID="pnlCrop" runat="server" Visible="false" Height="447px"> <asp:Image ID="imgCrop" runat="server" Height="250px" Width="300px" /> <br /> <input id="btnCrop" type="button" value="Crop" /> <input id="SubmitCropped" type="submit" value="submit" /> <br />t;br /> <br /> <br /> <br /> </asp:Panel> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; using System.Drawing; using System.Drawing.Imaging; using System.Drawing.Drawing2D; namespace ImageEx { } }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)