Asp.Net使用ImgAreaSelect实现图片截取

来源：互联网发布：java向构造方法里传参编辑：程序博客网时间：2024/06/06 11:40

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

结果

阅读全文

0 0