网页切图功能
先放效果图~~
点击开始截图按钮，然后从上到下有文字和图片的区域，鼠标按下开始截图，鼠标松开停止截图
然后图片保存到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>
<!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(0, 0), 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(0, 0), new Point(0, 0), new Size(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height));
IntPtr dc1 = g.GetHdc();
g.ReleaseHdc(dc1);
myImage.Save(@"c:\screen0.jpg");
}
}
}
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(0, 0), 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(0, 0), new Point(0, 0), new Size(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height));
IntPtr dc1 = g.GetHdc();
g.ReleaseHdc(dc1);
myImage.Save(@"c:\screen0.jpg");
}
}
}
截图结果
