- 在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;
}
}
}
}
- 结果