网页切图功能

先放效果图~~

 

 

点击开始截图按钮,然后从上到下有文字和图片的区域,鼠标按下开始截图,鼠标松开停止截图

然后图片保存到C盘的screen1.jpg图片

 

放源码

前台

 

jietu.aspx


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>截图</title> 
    
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
    
<form id="form1" runat="server">
 
<input type=button id="startJieTu" onclick="ClickStartJieTu();" value="开始截图" />
 
  
<input type=button id="endJieTu" onclick="ClickEndJieTu();" value="结束截图" />
    
    
<script>
    var x;
    var y; 
    var ClickDownX;
    var ClickDownY;
    var ClickUpX;
    var ClickUpY; 
    var width;
    var height ;
 
function event_ClickDown(){ 
        ClickDownX 
= event.screenX;
        ClickDownY 
= event.screenY; 
}
function event_ClickUp()
{
          ClickUpX 
= event.screenX;
          ClickUpY 
= event.screenY;
          
 
          
if(ClickUpX>=ClickDownX)
            width 
= ClickUpX - ClickDownX;
           
else
           width 
= ClickDownX - ClickUpX;
          
          
if(ClickUpY >= ClickDownY)
            height 
= ClickUpY - ClickDownY;
          
else
           height 
= ClickDownY - ClickUpY;
          
          
//此种情况是,如果是反向向左上角选择图形
          if(ClickDownX>ClickUpX&& ClickDownY>ClickUpY)
          {
              ClickDownX 
= ClickUpX;
              ClickDownY 
= ClickUpY;
          } 
           
//此种情况是,如果是反向向右上角选择图形
           if(ClickDownX<ClickUpX&& ClickDownY>ClickUpY)
          {
             ClickDownY 
= ClickUpY; 
          } 
           
            $(
"#MyMessage").html("width:"+width +"   ;height:"+height +"downx+downY"+ClickDownX+","+ClickDownY +";upx+upy"+ClickUpX+","+ClickUpY);
           GetJieTuByImage(); 
           ClickEndJieTu();
  
}
  
function ClickStartJieTu()
{
var oo 
= document.getElementById("myImg");
//     document.onmousedown=event_ClickDown;
//    document.onmouseup=event_ClickUp; 
         if(document.addEventListener)
        { 
            
//其它浏览器的事件代码: Mozilla, Netscape, Firefox
            
//添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件,不用加on 
  oo.attachEvent('mousedown', event_ClickDown, true);
    oo.attachEvent(
'mouseup', event_ClickUp, true);
        } 
        
else 
        { 
            
//IE 的事件代码 在原先事件上添加 add 方法 
          oo.attachEvent('onmousedown',event_ClickDown);       
           oo.attachEvent(
'onmouseup',event_ClickUp);       
        } 
}
  
function ClickEndJieTu()
{
         var oo 
= document.getElementById("myImg");
          
if(window.addEventListener)
        { 
            
//其它浏览器的事件代码: Mozilla, Netscape, Firefox
            
//添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件,不用加on 
            oo.removeEventListener('mousedown', event_ClickDown, true);
           oo.removeEventListener(
'mouseup', event_ClickUp, true);
        } 
        
else 
        {
            
//IE 的事件代码 在原先事件上添加 add 方法 
            oo.detachEvent('onmousedown',event_ClickDown);       
            oo.detachEvent(
'onmouseup',event_ClickUp);       
        }
}
    function GetJieTuByImage()
    { 
    var urlParam 
= "ht=qietu&localX="+ClickDownX+"&localY="+ClickDownY +"&picWidth="+width+"&picHeight="+height;
     $.ajax({
        type: 
"POST",
        url: 
"JieTu.aspx",
        data: urlParam,
        processData:
false,
        success: function(msg){ 
                 $(
"#MyMessage").html("width:"+width +"   ;height:"+height +"downx+downY"+ClickDownX+","+ClickDownY +";upx+upy"+ClickUpX+","+ClickUpY);
        },
        error:function(err){
          $(
"#MyMessage").html("失败");
        }
    });
    }  
 
 var EventUtil
=new Object;
EventUtil.addEvent
=function(oTarget,sEventType,funName){
    
if(oTarget.addEventListener){//for DOM;
  oTarget.addEventListener(sEventType,funName, false);
 }
else if(oTarget.attachEvent){
  oTarget.attachEvent(
"on"+sEventType,funName);
 }
else{
  oTarget[
"on"+sEventType]=funName;
 }
};
EventUtil.removeEvent
=function(oTarget,sEventType,funName){
    
if(oTarget.removeEventListener){//for DOM;
  oTarget.removeEventListener(sEventType,funName, false);
 }
else if(oTarget.detachEvent){
  oTarget.detachEvent(
"on"+sEventType,funName);
 }
else{
  oTarget[
"on"+sEventType]=null;
 }
};
function addLoadEvent(func){
    var oldonload
=window.onload;
    
if(typeof window.onload !="function"){
        window.onload
=func;
    }
else{
        window.onload
=function(){
            oldonload();
            func();
        }
    }
}

addLoadEvent(addClick);
function addClick(){
 var oDiv
=document.getElementById("myImg");
 oDiv.style.cursor
="pointer";
 EventUtil.addEvent(oDiv,
"mousedown",event_ClickDown);
}

    
</script> 
 
<div id="myImg">sdfsdfsdfsdf<br />serf<br />asfs
    
<img id="myImg1"   src="pic/20101206Emotion07.jpg" style="width: 634px; height: 480px" />sdffffffff<br />dsfsdfsdf
    
</div></form>
    
</body>
</html>

 

 

后台CS

 

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Drawing;
using System.Windows.Forms;
namespace MyMusicVideo
{
    
public partial class JieTu : System.Web.UI.Page
    {
  
      
        
protected void Page_Load(object sender, EventArgs e)
        {
            
if (Page.IsPostBack) return;
            Bind();
        }
        
void Bind()
        {
            
if (Request["ht"!= null)
            {
                
int localX = int.Parse(Request["localX"].ToString());
                
int localY = int.Parse(Request["localY"].ToString());
                
int picWidth = int.Parse(Request["picWidth"].ToString());
                
int picHeight = int.Parse(Request["picHeight"].ToString());



                Bitmap myImage 
= new Bitmap(picWidth,  picHeight);
                Graphics g 
= Graphics.FromImage(myImage);
                g.CopyFromScreen(
new Point( localX,  localY), new Point(00), new Size( picWidth,  picHeight));
                IntPtr dc1 
= g.GetHdc();
                g.ReleaseHdc(dc1);
                myImage.Save(
@"c:\screen1.jpg");

            }
        
        }
 

        
protected void Button1_Click(object sender, EventArgs e)
        {
            Bitmap myImage 
= new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height);
            Graphics g 
= Graphics.FromImage(myImage);
            g.CopyFromScreen(
new Point(00), new Point(00), new Size(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height));
            IntPtr dc1 
= g.GetHdc();
            g.ReleaseHdc(dc1);
            myImage.Save(
@"c:\screen0.jpg");
        }

 
    }
}

 

 

 

 

截图结果

posted @ 2010-12-10 15:03 小小部落 阅读(...) 评论(...) 编辑 收藏