然后就是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
相关资源:数据结构—成绩单生成器