用html5加js实现类似qq截屏功能

就是想qq截屏工具一样能够在屏幕上选择一个区域截图，图片可以不保存，直接打印出来，，请问有什么方法可以实现，，canvas不行，这个只能选择某个元素，，还有，这个功能要在IE上能用，，有什么网站可以推荐的么

12 个解决方案

#1

用activeX插件也行，有没有人会的啊

#2

http://blog.csdn.net/maoxin604/article/details/22938453

#3

http://download.csdn.net/detail/willian1st/8271025

#4

引用 2 楼 xmt1139057136 的回复:

http://blog.csdn.net/maoxin604/article/details/22938453

这个不行啊，我想要的是可以选择一个区域进行截图，就像qq的那个截图一样

#5

你自己做插件，安装浏览器插件

#6

引用楼主 sunney_ssc 的回复:

就是想qq截屏工具一样能够在屏幕上选择一个区域截图，图片可以不保存，直接打印出来，，请问有什么方法可以实现，，canvas不行，这个只能选择某个元素，，还有，这个功能要在IE上能用，，有什么网站可以推荐的么

楼主试试这个WEB截屏控件： http://www.cnblogs.com/xproer/archive/2010/12/05/1896778.html
与FCKEditor2.x整合
用html5加js实现类似qq截屏功能

与CKEditor3.x整合
用html5加js实现类似qq截屏功能

与KindEditor3.x整合
用html5加js实现类似qq截屏功能

与xhEditor1.x整合
用html5加js实现类似qq截屏功能

与Discuz!X2整合-常用工具条
用html5加js实现类似qq截屏功能

与Discuz!X2整合-高级工具条
用html5加js实现类似qq截屏功能

与Discuz!X2整合-弹出截屏选择窗口
用html5加js实现类似qq截屏功能

整合示例代码如下：


<!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>
<title>Web截屏控件标准版演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <link type="text/css" rel="Stylesheet" href="ScreenCapture/ScreenCapture.css" />
    <script type="text/javascript" src="ScreenCapture/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="ScreenCapture/ScreenCapture.js" charset="utf-8"></script>
</head>
<body>
	<div id="ScreenCaptureMessage">
		<div id="CaptureMessage">
			<img alt="进度图标" src="ScreenCapture/SL_Uploading.gif" /><span>图片上传中...</span><span>10%</span>
		</div>
		<input id="BtnCapture" type="button" value="截取屏幕区域" />
		<input id="BtnCapture2" type="button" value="截取整个屏幕" />
		<input id="BtnCapture3" type="button" value="截取指定区域" />
		<img id="ScreenImg" alt="截屏图片" style="display: none" />
	</div>
	<script type="text/javascript" language="javascript">
		var scpMgr = new CaptureManager("CaptureMessage");
		scpMgr.Config["PostUrl"] = "http://localhost:1830/asp.net/upload.aspx";

		window.onload = function()
		{
			$("#BtnCapture").click(function() { scpMgr.Capture(); });
			$("#BtnCapture2").click(function() { scpMgr.CaptureScreen(); });
			$("#BtnCapture3").click(function() { scpMgr.CaptureRect(0,0,100,100); });
		}
	</script>
</body>
</html>

标准版cab安装包(x86)
标准版cab安装包(x64)
标准版exe安装包
专业版exe安装包
专业版cab安装包
开发文档
ASP.NET标准版示例
ASP.NET专业版示例
ASP.NET-FCKEditor2.x示例
ASP.NET-CKEditor3.x示例
ASP.NET-KindEditor3.x示例
ASP.NET-xhEditor3.x示例
JSP标准版示例
JSP专业版示例
JSP-FCKEditor2.x示例示例
JSP-CKEditor3.x示例
JSP-KindEditor3.x示例
PHP-标准版示例
PHP-专业版示例

#7

截屏跟html5没有关系，QQ截屏是用控件做的。你必须使用控件才行。楼上提供的DEMO可以试一下。貌似不错。

#8

引用 6 楼 eIoBhMojo 的回复:

Xproer.ScreenCapture： http://www.cnblogs.com/xproer/archive/2010/12/05/1896778.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>
<title>Web截屏控件标准版演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <link type="text/css" rel="Stylesheet" href="ScreenCapture/ScreenCapture.css" />
    <script type="text/javascript" src="ScreenCapture/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="ScreenCapture/ScreenCapture.js" charset="utf-8"></script>
</head>
<body>
	<div id="ScreenCaptureMessage">
		<div id="CaptureMessage">
			<img alt="进度图标" src="ScreenCapture/SL_Uploading.gif" /><span>图片上传中...</span><span>10%</span>
		</div>
		<input id="BtnCapture" type="button" value="截取屏幕区域" />
		<input id="BtnCapture2" type="button" value="截取整个屏幕" />
		<input id="BtnCapture3" type="button" value="截取指定区域" />
		<img id="ScreenImg" alt="截屏图片" style="display: none" />
	</div>
	<script type="text/javascript" language="javascript">
		var scpMgr = new CaptureManager("CaptureMessage");
		scpMgr.Config["PostUrl"] = "http://localhost:1830/asp.net/upload.aspx";

		window.onload = function()
		{
			$("#BtnCapture").click(function() { scpMgr.Capture(); });
			$("#BtnCapture2").click(function() { scpMgr.CaptureScreen(); });
			$("#BtnCapture3").click(function() { scpMgr.CaptureRect(0,0,100,100); });
		}
	</script>
</body>
</html>

貌似不错，先收藏，最近做的一个项目需要用到这个功能。

#9

这个demo我试过了，控件需要公司授权，图片要上传，，，，我只要截屏，然后生成一张图片就好了，保存到本地就好

#10

楼主我想要的效果和你一样，你最后是怎么解决的？？？

#11

最后怎么解决的我只想知道？

#12

可以用牛牛截图

#1

用activeX插件也行，有没有人会的啊

#2

http://blog.csdn.net/maoxin604/article/details/22938453

#3

http://download.csdn.net/detail/willian1st/8271025

#4

引用 2 楼 xmt1139057136 的回复:

http://blog.csdn.net/maoxin604/article/details/22938453

这个不行啊，我想要的是可以选择一个区域进行截图，就像qq的那个截图一样

#5

你自己做插件，安装浏览器插件

#6

引用楼主 sunney_ssc 的回复:

就是想qq截屏工具一样能够在屏幕上选择一个区域截图，图片可以不保存，直接打印出来，，请问有什么方法可以实现，，canvas不行，这个只能选择某个元素，，还有，这个功能要在IE上能用，，有什么网站可以推荐的么

楼主试试这个WEB截屏控件： http://www.cnblogs.com/xproer/archive/2010/12/05/1896778.html
与FCKEditor2.x整合
用html5加js实现类似qq截屏功能

与CKEditor3.x整合
用html5加js实现类似qq截屏功能

与KindEditor3.x整合
用html5加js实现类似qq截屏功能

与xhEditor1.x整合
用html5加js实现类似qq截屏功能

与Discuz!X2整合-常用工具条
用html5加js实现类似qq截屏功能

与Discuz!X2整合-高级工具条
用html5加js实现类似qq截屏功能

与Discuz!X2整合-弹出截屏选择窗口
用html5加js实现类似qq截屏功能

整合示例代码如下：


<!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>
<title>Web截屏控件标准版演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <link type="text/css" rel="Stylesheet" href="ScreenCapture/ScreenCapture.css" />
    <script type="text/javascript" src="ScreenCapture/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="ScreenCapture/ScreenCapture.js" charset="utf-8"></script>
</head>
<body>
	<div id="ScreenCaptureMessage">
		<div id="CaptureMessage">
			<img alt="进度图标" src="ScreenCapture/SL_Uploading.gif" /><span>图片上传中...</span><span>10%</span>
		</div>
		<input id="BtnCapture" type="button" value="截取屏幕区域" />
		<input id="BtnCapture2" type="button" value="截取整个屏幕" />
		<input id="BtnCapture3" type="button" value="截取指定区域" />
		<img id="ScreenImg" alt="截屏图片" style="display: none" />
	</div>
	<script type="text/javascript" language="javascript">
		var scpMgr = new CaptureManager("CaptureMessage");
		scpMgr.Config["PostUrl"] = "http://localhost:1830/asp.net/upload.aspx";

		window.onload = function()
		{
			$("#BtnCapture").click(function() { scpMgr.Capture(); });
			$("#BtnCapture2").click(function() { scpMgr.CaptureScreen(); });
			$("#BtnCapture3").click(function() { scpMgr.CaptureRect(0,0,100,100); });
		}
	</script>
</body>
</html>

#7

截屏跟html5没有关系，QQ截屏是用控件做的。你必须使用控件才行。楼上提供的DEMO可以试一下。貌似不错。

#8

引用 6 楼 eIoBhMojo 的回复:

Xproer.ScreenCapture： http://www.cnblogs.com/xproer/archive/2010/12/05/1896778.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>
<title>Web截屏控件标准版演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <link type="text/css" rel="Stylesheet" href="ScreenCapture/ScreenCapture.css" />
    <script type="text/javascript" src="ScreenCapture/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="ScreenCapture/ScreenCapture.js" charset="utf-8"></script>
</head>
<body>
	<div id="ScreenCaptureMessage">
		<div id="CaptureMessage">
			<img alt="进度图标" src="ScreenCapture/SL_Uploading.gif" /><span>图片上传中...</span><span>10%</span>
		</div>
		<input id="BtnCapture" type="button" value="截取屏幕区域" />
		<input id="BtnCapture2" type="button" value="截取整个屏幕" />
		<input id="BtnCapture3" type="button" value="截取指定区域" />
		<img id="ScreenImg" alt="截屏图片" style="display: none" />
	</div>
	<script type="text/javascript" language="javascript">
		var scpMgr = new CaptureManager("CaptureMessage");
		scpMgr.Config["PostUrl"] = "http://localhost:1830/asp.net/upload.aspx";

		window.onload = function()
		{
			$("#BtnCapture").click(function() { scpMgr.Capture(); });
			$("#BtnCapture2").click(function() { scpMgr.CaptureScreen(); });
			$("#BtnCapture3").click(function() { scpMgr.CaptureRect(0,0,100,100); });
		}
	</script>
</body>
</html>

貌似不错，先收藏，最近做的一个项目需要用到这个功能。

#9

这个demo我试过了，控件需要公司授权，图片要上传，，，，我只要截屏，然后生成一张图片就好了，保存到本地就好

#10

楼主我想要的效果和你一样，你最后是怎么解决的？？？

#11

最后怎么解决的我只想知道？

#12

可以用牛牛截图

秒客网

用html5加js实现类似qq截屏功能

12 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

相关文章