- 在ImgAreaSelect官網下載文件
解壓文件，將下圖中選擇的文件導入到項目中
導入後結果爲
創建使用頁面 這裏創建的aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="imgAreaselect.aspx.cs" Inherits="BookShop.Web.Test.imgAreaselect" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/jquery-1.7.1.js"></script>
<script src="../js/jquery.imgareaselect.js"></script>
<script src="../js/jquery.imgareaselect.js"></script>
<link href="../Css/imgareaselect-default.css" rel="stylesheet" />
<script type="text/javascript" >
$(function () {
//展示圖片
showImage();
$("#btnCut").click(function () {
//截取選中框中的圖片
cutPhoto();
});
})
function showImage() {
$('#selectbanner').imgAreaSelect({//在id爲selectbanner的圖片上顯示選中框
selectionColor: 'blue',//設置選擇顏色
x1: 0, y1: 0, x2: 100, y2: 100,//設置選中框的初始位置和大小
selectionOpacity: 0.2,//設置選中框的透明度
//minWidth,maxWidth,minHeight,maxHeight設置選中框的最小及最大大小
onSelectEnd: preview//設置選中框停止拖動後觸發的事件
});
}
//停止拖動及選擇結束後調用的事件 獲得選中框的位置和大小
function preview(img, selection) {
$('#selectbanner').data('x', selection.x1);
$('#selectbanner').data('y', selection.y1);
$('#selectbanner').data('w', selection.width);
$('#selectbanner').data('h', selection.height);
}
//進行圖片截取並展示出來
function cutPhoto() {
var pars = {
"x": $('#selectbanner').data('x'),//選中框的位置
"y": $('#selectbanner').data('y'),
"width": $('#selectbanner').data('w'),//選中框的大小
"height": $('#selectbanner').data('h'),
"action": "cut",//動作判斷條件
"imgSrc": $("#selectbanner").attr("src")//圖片路徑
};
//通過/ashx/upload.ashx 進行截圖
$.post("/ashx/upload.ashx", pars, function (data) {
//將截取後的圖片進行展示
$("#showPhoto").attr("src", data);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="selectbanner" src="../Images/Test/59688723_p0.png" />
<input type="button" value="截取圖片" id="btnCut" />
</div>
<!-- 截圖展示位置 /!-->
<img id="showPhoto"/>
</form>
</body>
</html>
4 . 編寫截圖功能的一般處理程序upload.ashx
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
namespace BookShop.Web.ashx
{
/// <summary>
/// upload 的摘要說明
/// </summary>
public class upload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["action"];
if (action == "upload")
{
ProcessFileUpload(context);
}
else if (action == "cut")
{
ProcessCutPhoto(context);//進行截圖操作
}
else
{
context.Response.Write("參數錯誤!!");
}
}
private void ProcessFileUpload(HttpContext context) {
}
private void ProcessCutPhoto(HttpContext context)
{
int x = Convert.ToInt32(context.Request["x"]);//獲得選中框位置
int y = Convert.ToInt32(context.Request["y"]);
int width = Convert.ToInt32(context.Request["width"]);//獲得選中框大小
int height = Convert.ToInt32(context.Request["height"]);
string imgSrc = context.Request["imgSrc"];//獲得圖像虛擬路徑
using (Bitmap map = new Bitmap(width, height))//爲截圖繪製位圖
{
using (Graphics g = Graphics.FromImage(map)) {//創建畫板
using (Image img = Image.FromFile(context.Request.MapPath(imgSrc))) {//獲得圖像的物理路徑
g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);//img爲制定的Image文件 new Rectangle(0, 0, width, height)在畫板g上繪製範圍 new Rectangle(x, y, width, height)爲img上指定的繪製範圍
string newfileName = Guid.NewGuid().ToString();//進行截圖圖片命名
string fullDir = "/ImageUpload/" + newfileName + ".jpg";//路徑命名
map.Save(context.Request.MapPath(fullDir), System.Drawing.Imaging.ImageFormat.Jpeg);//進行截圖圖片保存
context.Response.Write(fullDir);//返回截圖圖片路徑
}
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
- 結果
