使用imgAreaSelect截取图像使用说明

最新推荐文章于 2024-03-15 09:32:17 发布

sd6275832ght

最新推荐文章于 2024-03-15 09:32:17 发布

阅读量580

点赞数

本文链接：https://blog.csdn.net/sd6275832ght/article/details/83870521

版权

首先引入相应的css 和 js

    <link href="content/imgareaselect-default.css" rel="stylesheet" />
    <script src="jq/jquery-1.7.1.min.js"></script>
    <script src="jq/ajaxfileupload.js"></script>//这里要用到异步上传图片
    <script src="jq/imgareaselect.min.js"></script>//这里是imgAreaSelect使用所以要引入此js

使用说明

< img id="img1" src="/pic/banner.jpg" />

3、imgAreaSelect的数据操作
            $('#img1').imgAreaSelect({
                selectionColor: 'white',//选择区域的颜色
                x1: 0,//初始区的左上角的x坐标
                y1: 0,//初始区的左上角的y坐标
                x2: 200,//初始区的右下角的x坐标
                y2: 200,//初始区的右下角的y坐标
                selectionOpacity: 0.2//选择区的透明度
            });
这样即可在该图片元素中使用裁剪功能了，当选框确定之后我们要保存被选择的图片还得自己写代码来操作。下面是当确定好图片区域后点击一个裁剪按钮后的操作：

4、裁剪确认操作
$('#btnGetPhoto').click(function () {
        var pic = $('#img1').attr('src');
        
        var ias = $('#img1').imgAreaSelect({ instance: true });//获取选择器
        var selection = ias.getSelection();//获取选择区
        
        $.post(
         "PhotoGet.ashx",//使用post方式发送一个异步请求
	{
	    
             x: selection.x1,//获取选择区的左上角x坐标
             y: selection.y1,//获取选择区的左上角y坐标
             w: selection.width,//获取选择区的宽度
             h: selection.height,//获取选择区的高度
             img: pic
         },
         function (data) {
             $('#img2').attr('src', data);
         }
        );
    });
});

5、服务器端处理
在小图中绘制另外一张图，使用g.DrawImage(Image, destRect, srcRect, GraphicsUnit.Pixel)的重载
需要在服务器端接收 x,y,w,h,img 四个参数

例子如下:
前端代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Maticsoft.Web.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="content/imgareaselect-default.css" rel="stylesheet" />
    <script src="jq/jquery-1.7.1.min.js"></script>
    <script src="jq/ajaxfileupload.js"></script>
    <script src="jq/imgareaselect.min.js"></script>
    <script type="text/javascript">
        $(function () {
            LoadImage();
        });
        function LoadImage() {
            $('#btnClick').click(function () {
                $.ajaxFileUpload({
                    url: 'LoadPhoto.ashx',//执行上传处理的文件地址
                    secureuri: false,//是否加密，一般是false，默认值为false
                    fileElementId: 'fileName',//<input type="file" id="UpImg1" name="UpImg1"/> 这里的fileElementId 属性值必须和id是一样的并且要求这个控件要有name属性，用于在服务器端接收
                    data: {//额外传递的数据，使用json，此时必须设置type为post
                        type: 1
                    },
                    type: 'post',//请求方式，如果传递额外数据，必须是post
                    success: function (data) {//成功的回调函数，内部处理会加上html标签
                        //因返回的data 是dom对象需转换成jquery对象才能获取到对应的相对路径
                        $("#img1").attr("src", $(data).text());
                        $('#img1').imgAreaSelect({
                            selectionColor: 'white',//选择区域的颜色
                            x1: 0,//初始区的左上角的x坐标
                            y1: 0,//初始区的左上角的y坐标
                            x2: 200,//初始区的右下角的x坐标
                            y2: 200,//初始区的右下角的y坐标
                            selectionOpacity: 0.2//选择区的透明度
                        });
                    }
                });
             
            });
            $('#btnSelect').click(function () {

                var ias = $('#img1').imgAreaSelect({ instance: true });//获取选择器
                var selection = ias.getSelection();//获取选择区
                $.post('LoadPhoto.ashx', {
                    img: $('#img1').attr('src'),//获取图片路径
                    x1: selection.x1,//获取起点横坐标
                    y1: selection.y1,//获取起点纵坐标
                    width: selection.width,//获取选定宽度
                    height: selection.height,//获取选定高度
                    type: 2//截取操作

                }, function (data) {
                    $('#img2').attr('src', data);
                    $('#imgFile').val(data);
                })
            });
        };
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <input type="file" id="fileName" name="fileName" />
     <input type="button" id="btnClick" value="上传文件" />
     <input type="button" id="btnSelect" value="截取头像" />
     <img src=""  id="img1"/>
    <img src="" id="img2" />
    <input type="text" readonly="readonly" id="imgFile" name="imgFile" />
    </div>
    </form>
</body>
</html>

后台服务器端代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
namespace Maticsoft.Web
{
    /// <summary>
    /// LoadPhoto 的摘要说明
    /// </summary>
    public class LoadPhoto : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int type = int.Parse(context.Request["type"]);
            if (type==1)
            {
                HttpPostedFile files = context.Request.Files["fileName"];
                string serverPath = "/bookimg/" + files.FileName;
                string allServerPath = context.Request.MapPath(serverPath);
                files.SaveAs(allServerPath);
                context.Response.Write(serverPath);
            }
            else 
            {
                 int x1 = int.Parse(context.Request["x1"]);
                int y1 = int.Parse(context.Request["y1"]);
                int width = int.Parse(context.Request["width"]);
                int height = int.Parse(context.Request["height"]);
                string img = context.Request["img"];
                //1.jpg->1_1.jpg
                string ext = Path.GetExtension(img);
                string path1 = img.Substring(0, img.IndexOf(ext)) + "_1" + ext;
                string path2 = context.Request.MapPath(path1);

                using (Bitmap bitmap2 = new Bitmap(width, height))
                {
                    using (Bitmap bitmap1 = new Bitmap(context.Request.MapPath(img)))
                    {
                        Graphics g = Graphics.FromImage(bitmap2);

                        g.DrawImage(bitmap1, new Rectangle(0, 0, width, height), new Rectangle(x1, y1, width, height), GraphicsUnit.Pixel);
                        bitmap2.Save(path2, ImageFormat.Jpeg);
                    }
                }
                context.Response.Write(path1);
            }
           
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}