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

  1. 在ImgAreaSelect官网下载文件
  2. 解压文件,将下图中选择的文件导入到项目中
    Asp.Net使用ImgAreaSelect实现图片截取_第1张图片Asp.Net使用ImgAreaSelect实现图片截取_第2张图片
    导入后结果为
    Asp.Net使用ImgAreaSelect实现图片截取_第3张图片这里写图片描述

  3. 创建使用页面 这里创建的aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="imgAreaselect.aspx.cs" Inherits="BookShop.Web.Test.imgAreaselect" %>

    

    <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
    {
        /// 
        /// upload 的摘要说明
        /// 
        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;
                }
            }
        }
    }
  1. 结果

你可能感兴趣的:(Tool)