ASP.NET在线截图方法

最新推荐文章于 2017-09-16 15:08:00 发布

weixin_30835933

最新推荐文章于 2017-09-16 15:08:00 发布

阅读量95

点赞数

文章标签： c# xhtml php

原文链接：http://www.cnblogs.com/weishaobo/p/3348525.html

版权

　　公司最近的项目有用户头像，可能会用到用户自定义头像。正好最近闲来无事，研究了一下在线截图，方便用户自定义头像。

具体的方式为：在截图的时候会在一个大图片上出现一个小框，小框可以在大图片中随意的拖动，当点击小框就会将内显示的大图截取下来并保存。

　　实现的环境：htm，ashx（也可以使用PHP），jquery，jquery-ui

　　步骤：

　 1、先实现那个拖动小框的效果。这个主要是使用jquery-ui的draggable和resizable。draggable是使一个元素可以随意的拖动，resizable是使元素可以随意的控制大小。draggable和resizable的具体参数请参考jquery-ui手册。

　　具体代码为：

  $("#cut").draggable({ containment: "#pdiv" }); //拖动的小框只能大图片的范围内在进行移动
  $("#cut").resizable({ aspectRatio: 1, minHeight: 250 }); //小框的最小尺寸是250px并且是等比例缩放

　　2、获取小框左上角在大图片上的X轴和Y轴绝对坐标。利用offset来大图片相对于浏览器的位置和小框相对于浏览器的位置，两者相减就得出小框左上角在大图片上的X轴和Y轴绝对坐标。

    var left = $("#cut").offset().left - $("#pdiv").offset().left; //小框左上角相对于大图片的X坐标
    var top = $("#cut").offset().top - $("#pdiv").offset().top; //小框左上角相对于大图片的Y坐标

　　3、将获得坐标和需要截取图片的高宽放送的服务端，就可以截取需要的图片了

　　　　　　　　　var left = $("#cut").offset().left - $("#pdiv").offset().left; //小框左上角相对于大图片的X坐标
                var top = $("#cut").offset().top - $("#pdiv").offset().top; //小框左上角相对于大图片的Y坐标
                var width = $(this).width();
                var height = $(this).height();
                $.get("./Handler.ashx", { "width":width,"height":height,"x": left, "y": top }, function (data) {
                    $("#im").attr("src", data);
                    $("#im").css("width", width);
                    $("#im").css("height", height);
                });

　所有代码:

html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="CSS/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Script/jquery-ui-1.10.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#cut").draggable({ containment: "#pdiv" }); //拖动的小框只能大图片的范围内在进行移动
            $("#cut").resizable({ aspectRatio: 1, minHeight: 250 }); //小框的最小尺寸是250px并且是等比例缩放
            $("#cut").click(function () {
                var left = $("#cut").offset().left - $("#pdiv").offset().left; //小框左上角相对于大图片的X坐标
                var top = $("#cut").offset().top - $("#pdiv").offset().top; //小框左上角相对于大图片的Y坐标
                var width = $(this).width();
                var height = $(this).height();
                $.get("./Handler.ashx", { "width":width,"height":height,"x": left, "y": top }, function (data) {
                    $("#im").attr("src", data);
                    $("#im").css("width", width);
                    $("#im").css("height",height);
                });
            });
        })
    </script>
</head>
<body>
    <div id="pdiv" style="background-image:url(images/111.jpg);width:640px;height:961px;float:left;">
    <div id="cut" style="border:1px solid red;width:250px;height:250px;">
    </div>
    </div>
   <div style="float:right;"> 用户头像：<img id="im" style="width:250px;height:250px;"  /></div>
</body>
</html>

　　ashx:

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Drawing;
using System.Drawing.Drawing2D;

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        int x = Convert.ToInt32(context.Request.QueryString["x"]);
        int y = Convert.ToInt32(context.Request.QueryString["y"]);
        int width = Convert.ToInt32(context.Request.QueryString["width"]);
        int height = Convert.ToInt32(context.Request.QueryString["height"]);
        string path = context.Server.MapPath("~/images/") + "111.jpg";
        using (Image oldImage = new Bitmap(path))
        {
            using (Bitmap map = CutBitmap(oldImage,width,height, x, y))
            {
                map.Save(context.Server.MapPath("~/images/")+"222.jpg"); 
            } 
        }
        context.Response.Write("./images/222.jpg");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }


    private static Bitmap CutBitmap(Image oldImage, int width,int height,int x, int y)
    {
        if (oldImage == null)
            throw new ArgumentNullException("oldImage");
        Bitmap newBitmap = new Bitmap(width, height);
        using (Graphics g = Graphics.FromImage(newBitmap))
        {
            g.InterpolationMode = InterpolationMode.High;
            g.SmoothingMode = SmoothingMode.AntiAlias;
            g.CompositingQuality = CompositingQuality.HighQuality;
            g.DrawImage(oldImage, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
            g.Save();
        }
        return newBitmap;
    }

}

　　效果图：

也许大家还有更NB的方法实现这一功能，认为这方法不行的请勿喷。谢谢

转载于:https://www.cnblogs.com/weishaobo/p/3348525.html

weixin_30835933

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET在线截图方法

　　公司最近的项目有用户头像，可能会用到用户自定义头像。正好最近闲来无事，研究了一下在线截图，方便用户自定义头像。具体的方式为：在截图的时候会在一个大图片上出现一个小框，小框可以在大图片中随意的拖动，当点击小框就会将内显示的大图截取下来并保存。　　实现的环境：htm，ashx（也可以使用PHP），jquery，jquery-ui　　步骤：　 1、先实现那个拖动...
复制链接

扫一扫