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

sunney_ssc 2015-12-26 09:33:00

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

...全文

16527 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

御剑千山梦 2017-12-13

打赏
举报

可以用牛牛截图

土豆的梦想 2017-10-11

打赏
举报

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

zongyabei2210 2017-09-05

打赏
举报

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

sunney_ssc 2016-01-04

打赏
举报

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

业余草 2015-12-28

打赏
举报

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

sunney_ssc 2015-12-28

打赏
举报

引用 2 楼 xmt1139057136 的回复:

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

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

eIoBhMojo 2015-12-28

打赏
举报

引用楼主 sunney_ssc 的回复:

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

楼主试试这个WEB截屏控件：http://www.cnblogs.com/xproer/archive/2010/12/05/1896778.html 与FCKEditor2.x整合

与CKEditor3.x整合

与KindEditor3.x整合

与xhEditor1.x整合

与Discuz!X2整合-常用工具条

与Discuz!X2整合-高级工具条

与Discuz!X2整合-弹出截屏选择窗口

整合示例代码如下：


<!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-专业版示例

fLiow6enn 2015-12-28

打赏
举报

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

ftaomanman 2015-12-28

打赏
举报

引用 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>