jQuery+Asp.net结合实现图片截图

这是在公司写的，所有是vb 别介意

页面代码

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CreateImage.aspx.vb" Inherits="CreateImage" %>

<!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 runat="server">
<title></title>
<link href="css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery-1.5.min.js" type="text/javascript"></script>
<script src="JS/jquery.imgareaselect.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img#photo').imgAreaSelect({ handles: true,
onSelectEnd: function(img, selection) {
//$("#show").html("");
//$("#show").append(selection.x1 + "#" + selection.y1 + "#" + selection.width + "#" + selection.height);
$("#TextBox2").val(selection.x1);
$("#TextBox3").val(selection.y1);
$("#TextBox4").val(selection.width);
$("#TextBox5").val(selection.height);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<img src="images/0001.jpg" id="photo" />
<div id="show">
<asp:TextBox ID="TextBox2" runat="server" Text="0"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server" Text="0"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server" Text="0"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server" Text="0"></asp:TextBox>
</div>
<asp:Button ID="Button2" runat="server" Text="剪裁" />
<br />
<img src="images/Pic.jpg" id="PicBox" runat="server" style="border: 1px solid #ccc;
padding: 2px;" />
</form>
</body>
</html>

后台代码

View Code

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
Dim x As Integer = CType(CType(Me.FindControl("TextBox2"), TextBox).Text, Integer)
Dim y As Integer = CType(CType(Me.FindControl("TextBox3"), TextBox).Text, Integer)
Dim width As Integer = CType(CType(Me.FindControl("TextBox4"), TextBox).Text, Integer)
Dim height As Integer = CType(CType(Me.FindControl("TextBox5"), TextBox).Text, Integer)
Dim strPicUrl As String = "images/0001.jpg" '原图路径
Dim strSavePicUrl As String = "D:\Project\Test001\images\Pic.jpg"

Dim newImage As System.Drawing.Image = Image.FromFile(Server.MapPath(strPicUrl))
'Dim newImage As System.Drawing.Image = System.Drawing.Image.FromStream(strPicUrl.InputStream, True)
'定位
Dim fromR As Rectangle = New Rectangle(x, y, width, height) ''原图裁剪定位
Dim toR As Rectangle = New Rectangle(0, 0, width, height) ''目标定位

Dim units As GraphicsUnit = GraphicsUnit.Pixel

Dim pickedImage As System.Drawing.Image = New System.Drawing.Bitmap(toR.Width, toR.Height)
Dim g As System.Drawing.Graphics = Graphics.FromImage(pickedImage)

'清空画布
g.Clear(Color.White)

'设置质量
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality

'剪裁
g.DrawImage(newImage, toR, fromR, units)

'处理图像质量
Dim codecs As ImageCodecInfo() = ImageCodecInfo.GetImageEncoders()
Dim ici As ImageCodecInfo ' = System.DBNull
For Each codec As ImageCodecInfo In codecs
If codec.MimeType = "image/jpeg" Then
ici = codec
End If
Next

Dim ep As EncoderParameters = New EncoderParameters
ep.Param(0) = New EncoderParameter(System.Drawing.Imaging.Encoder.Quality, CLng(100))

'pickedImage.Save(strSavePicUrl, System.Drawing.Imaging.ImageFormat.Jpeg)
pickedImage.Save(strSavePicUrl, ici, ep)

newImage.Dispose()
pickedImage.Dispose()
g.Dispose()

End Sub

看不惯vb码的朋友这有个网站可以自己转换：

http://www.developerfusion.com/tools/convert/csharp-to-vb/

该功能使用jQuery插件详细如下：

http://odyniec.net/projects/imgareaselect/usage.html