[转]截屏保存为图片的代码

最近看了有些网站实现的在线截图功能比较不错。就是上传一个图片以后，把裁剪成固定大小的图片一般用来做自己的照片。    我这文章就是实现这功能，开发工具是vs2005和两个js类库，dom-drag.js和jquery，使用比较简单，这个两个js类库是恨优秀的，建议大家再看看。  先发一个效果图片看看     0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">     这个效果是模拟的，如何上传图片等这些小问题就不说了。那个大图片是已经上传到服务器了。然后有个黑色边框的框长和宽都是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 onclick="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/qqflying/archive/2010/01/19/1651658.html