ASP.NET实现在线截图[转载]

it2024-10-06  16

最近看了有些网站实现的在线截图功能比较不错。就是上传一个图片以后,把裁剪成固定大小的图片一般用来做自己的照片。   我这文章就是实现这功能,开发工具是vs2005和两个js类库,dom-drag.js和jquery,使用比较简单,这个两个js类库是恨优秀的,建议大家再看看。 先发一个效果图片看看 这 个效果是模拟的,如何上传图片等这些小问题就不说了。那个大图片是已经上传到服务器了。然后有个黑色边框的框长和宽都是100px。我们就是要截取这个大 小的图片来作为我们的头像。你可以拖动这个黑框到合适的位置来截取我们想要的图片。在ie7的效果中必须点中边框才能拖到,在火狐中可以点住黑框的任何地 方。而且这个黑框我没有做边界限制,就是说他不应该拖出这个大图片的范围。如果拖出了就是报错。    我们需要建立这个两个页面cutImage.aspx和cutImageAjax.aspx    cutImage.aspx就是我们看到的效果图了。    <script language=javascript  src=drag.js></script>    <script language=javascript src=jquery-1.2.3.pack.js></script>添加两个js类库    然后是body中的html标签。这里面的html样式是需要下一番功夫才出来的(aa.gif就是我们测试用的大图)     <div style="position:relative;">        <img src="pic/aa.gif" id="im" />                <div   style=" border:solid 2px black ;width:100px; height:100px; cursor:hand; position:absolute; left:0px; z-index:10; top:0px; background-color:Black  filter:alpha(opacity=20);" id="divCut"></div>        </div>        <hr />        <input type=button οnclick="cut()"  value="确定裁剪" />        <hr />         裁剪过的结果:        <img id="imgresult" />        <hr />        <div style="border:solid 1px black;" id="divRecord"></div>

    然后就是js代码了    <script language=javascript>        function init()//初始化执行        {            var cutDiv = document.getElementById('divCut');            Drag.init(cutDiv);//这个就是拖到黑框的关键            cutDiv.onDrag = function(x,y)//这个是拖动黑框时候引发的事件,x,y就是坐标            {                document.getElementById("divRecord").innerHTML ="cutDiv 的坐标" + x + '--' + y + "<br>图片坐标"+ document.getElementById("im").offsetLeft + "-"+document.getElementById("im").offsetTop;            }         }        function cut()//裁剪按钮的事件        {            var x = document.getElementById("divCut").offsetLeft - 10;//减10是因为大图的起始x是10.            var y = document.getElementById("divCut").offsetTop;                        $.get("cutImageAjax.aspx?t=" +((new Date()).valueOf()) , { offx:x ,offy:y },  callback);//jquery中ajax方法,比较简单了。就是要吧x,和y的坐标传过去。        }        function callback(res)//这个是回调函数。如果res等于空字符表示成功了,然后显示裁剪过的图片,我们裁剪过后的图片的地址和名字是固定。        {            if(res=='')            {                document.getElementById('imgresult').src= 'pic/aa1.gif';            }        }    </script>

    然后就是该看cutImageAjax.aspx页面的后台处理了。其实后台裁剪图片是比较简单的。     protected void Page_Load(object sender, EventArgs e)    {        if (!Page.IsPostBack)        {            string x = Page.Request.QueryString["offx"].ToString();            string y = Page.Request.QueryString["offy"].ToString();            Bitmap bm = new Bitmap(Server.MapPath("pic/aa.gif"));            Rectangle cloneRect = new Rectangle(int.Parse(x),int.Parse(y) , 100,100);            PixelFormat format = bm.PixelFormat;            Bitmap cloneBitmap = bm.Clone(cloneRect, format);            // ===保存图片===            cloneBitmap.Save(Server.MapPath("pic/aa1.gif"),ImageFormat.Gif);        }    }    看看吧。关键的裁剪代码就是这样的。但是我这里没有做其他的判断,比如图片的格式等,如果上传其他不同格式图片可能还要做其他处理,这里我就没有说明了,不过道理差不多了。

转载于:https://www.cnblogs.com/honeymoon/archive/2011/04/17/2018993.html

相关资源:数据结构—成绩单生成器
最新回复(0)