.NET异步上传图片并截取图片

最新推荐文章于 2024-03-06 14:05:01 发布

打锤子棒棒糖

最新推荐文章于 2024-03-06 14:05:01 发布

阅读量656

点赞数

分类专栏： Asp 文章标签：截取图片

本文链接：https://blog.csdn.net/qq_33022911/article/details/80657257

版权

Asp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.使用到插件有ajaxfileupload.js,imgareaselect.min.js,并引入imgareaselect-default.css
2.插件有效链接在这 https://pan.baidu.com/s/1y2Xh1892yx5DKoMqJhQKSw

前台代码如下
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="content/imgareaselect-css/imgareaselect-default.css" rel="stylesheet" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/ajaxfileupload.js"></script>
    <script src="js/imgareaselect.min.js"></script>
    <script>
        $(function () {
            $('#btnUploadImg').click(function () {
                $.ajaxFileUpload({
                    url: 'CustomerPhoto.ashx',
                    fileElementId: 'file1',
                    data: {
                        type: 1//上传操作
                    },
                    type: 'post',
                    success: function (data) {
                        $("#img1").attr("src", $(data).text());
                        $('#img1').imgAreaSelect({
                            selectionColor: 'white',//选择区域的颜色
                            x1: 0,//初始区的左上角的x坐标
                            y1: 0,//初始区的左上角的y坐标
                            x2: 200,//初始区的右下角的x坐标
                            y2: 200,//初始区的右下角的y坐标
                            selectionOpacity: 0.2//选择区的透明度
                        });
                    }
                });

            });

            $('#btnClip').click(function () {

                var ias = $('#img1').imgAreaSelect({ instance: true });//获取选择器
                var selection = ias.getSelection();//获取选择区

                $.post(
                    'CustomerPhoto.ashx',
                {
                    img: $('#img1').attr('src'),
                    x1: selection.x1,
                    y1: selection.y1,
                    width: selection.width,
                    height: selection.height,
                    type: 2//截取操作
                },
                    function (msg) {
                        $('#img2').attr('src', msg);
                        $('#imgPhoto').val(msg);
                    }
                );
            });
        });
    </script>
</head>
<body>
    <input type="file" id="file1" name="file1" />
    <input type="button" id="btnUploadImg" value="上传图片" />
    <br />
    <input type="button" id="btnClip" value="选择头像" />
    <input type="text" readonly="readonly" id="imgPhoto" name="imgPhoto" />
    <br />

    <img id="img1" src="" />
    <br />
    <img id="img2" src="" />
</body>
</html>

后台代码,写在一般处理程序中

using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Web;
using System.Web.SessionState;

namespace Demo
{
///
/// CustomerPhoto1 的摘要说明
///
public class CustomerPhoto1 : IHttpHandler, IRequiresSessionState
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        int type = int.Parse(context.Request["type"]);

        if (type == 1)
        {
            // 上传操作
            HttpPostedFile file1 = context.Request.Files["file1"];
            string path = "/CustomerPhoto/" + context.Session["CustomerId"] + Path.GetExtension(file1.FileName);
            string path2 = context.Request.MapPath(path);

            file1.SaveAs(path2);

            context.Response.Write(path);
        }
        else
        {
            // 截取操作

            string img = context.Request["img"];
            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 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;
        }
    }
}

}