javascript实现当前页面截屏
javascript实现当前页面截屏
一、前言
有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果。比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存。但又不能安装任何客户端控件,只能用javascript实现.网上搜索了一下,没有可用的方案(http://www.2cto.com/kf/201301/184453.html,这个虽然提供了方法,但是在实际使用中无法满足,例如支持低版本的IE,支持内嵌的iframe截图)。但是也找到了一些可能的思路,经过几天奋战,终于完成一个可用的javascript截屏思路。因为是javascript,所以还是会有一些限制,例如只能在页面内截屏,截屏范围不能超出当前页面等。还好这些是客户没有要求的。
二、演示地址及说明
下面是效果图和演示地址。
(不好意思,本来打算提供演示地址,因为一些原因暂时无法提供,以后能提供的时候再把地址写上)
登陆进去后,点击页面顶部的 打开截屏控制器 按钮,然后在点击 截屏 按钮,这时候整个页面处于截屏状态,按下鼠标左键并移动鼠标,画出截屏区域,然后双击截屏区域就可将当前区域保存为图片下载。
三、实现思路及主要问题
因为系统中集成的代码比较多,所以无法直接贴出源代码,这里只给出具体的思路,和实现过程中遇到的难点问题并给出难点问题的一些参考代码。
具体的思路其实不难,需要有服务器端的配合,这里的服务器使用asp.net。主要有以下几个步骤:
1、获取当前页面dom的html保存。
2、将html代码发送到服务器
3、在服务器端使用浏览器对象重新载入代码,还原用户当时的页面状态
4、使用浏览器对象的生成图片功能生成图片
上面是总体的思路,在实现的过程中需要注意一些细节问题。
1、第一个问题就是获取当前用户页面的dom的html。对于IE来说,使用outerHTML就可以了,但是对于非IE浏览器,使用outerHTML无法获取用户做过修改的内容。这里就需要做一下修改。在jquery中,有一个.html()方法,这个方法返回的是innerHTML,估计jquery内部也是用了浏览器本身的innerHTML方法,所以这个.html()也无法获取用户修改后的页面dom代码。下面代码就是对.html()方法做一些修改,已支持获取用户修改后的内容。
(function ($) {
var oldHTML = $.fn.html;
$.fn. newhtml = function () {
if (arguments.length) return oldHTML.apply(this, arguments);
$("input,,button", this).each(function () {
this.setAttribute('value', this.value);
});
$(":radio,:checkbox", this).each(function () {
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function () {
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
$("textarea", this).each(function () {
this.innerHTML = this.value;
});
return oldHTML.apply(this);
};
})(jQuery);
}
2、第二个问题就是服务器的浏览器对象,在asp.net中,我们可以使用System.Windows.Forms
.WebBrowser这个对象。为了能在asp.net中使用这个对象,.aspx页面的Page标签内必须使用 AspCompat="true"属性,否则会出错。这方面的代码网上有很多,这里就不在贴代码了,大家自行google就可以了。
剩下的就是具体实现的小问题,比如要记录当前截屏区的位置和大小等等。
有了以上的实现思路,我们还可以做很多其他的工作。例如将页面指定的控件另存的图片,这个功能有很多用处,比如有一个web页面的统计报表,但是客户需要的是一个图片形式的,或者pdf,或者word格式的文档,我们就可以利用这种方法,将指定控件的内容生成图片,然后在服务器端生成pdf或者word,将图片插入即可。
四、缺点
这种方法因为是在服务器端重现用户当时的页面信息,尽量还原当时的状态,但并不能做到完全一致,因为页面的状态信息是无法在服务器端完全复制和还原的。比如,客户端的一些activeX控件无法再服务器端重新,如果客户端是非IE浏览器,截屏的效果可能和实际效果不同(当然如果您访问的页面已经做了浏览器兼容,在不同浏览器访问时效果一样,那么也就不会有问题了),因为服务器端的浏览器(我们用的是window平台技术)是IE。
五、后续
本章介绍了截屏的基本原理和实现思路,下面两章讲一讲另存页面或者页面内指定控件内容为图片,以及使用javascript录制屏幕,然后播放视屏的方法。
javascript实现当前页面截屏的更多相关文章
- Android 使用WebView加载含有Canvas的页面截屏处理
无法截屏主要原因是webview渲染方式所导致:只需要AndroidManifest.xml中设置属性Android:hardwareAccelerated=”false”.
- Android 获取浏览器当前分享页面的截屏
Android 获取浏览器当前分享页面的截屏 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/BrowserScreenShotActivity 文中 ...
- android手机截屏、录屏
1. 手动截屏,通过其他第三方软件发送截图,或者从手机取出截图 2. 使用命令截图,将截图保存到手机,再拉取到电脑 #!/bin/sh #运行 sh screenshot name picName=$ ...
- pytest框架优化——将异常截屏图片加入到allure报告中
痛点分析: 在做allure定制化的时候,关于附件添加这一块,我们在代码里可以添加我们准备好的附件,这里用图片,通过下面的方法就能实现 allure.attach(file, '图片描述', allu ...
- 搭建前端监控系统(六)JS截屏和录屏篇
怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...
- 使用 JavaScript 截屏
经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...
- php结合phantomjs实现网页截屏、抓取js渲染的页面
首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...
- Javascript网页截屏的方法
最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上.目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果. 之前我曾写过如何将canvas图形转换成 ...
- asp.net截屏功能实现截取web页面
using System.Drawing; //打开该页面 System.Diagnostics.Process.Start("IEXPLORE.EXE", "http ...
随机推荐
- 总结oninput、onchange与onpropertychange事件的用法和区别,onchange
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- table中的td内容超出隐藏
<table style="table-layout: fixed;width: XXX px"> <tr> <td style="whit ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- Objective-C( Foundation框架 一 NSFileManager)
NSFileManager 用来管理文件系统的 它可以用于常见的文件,文件夹操作(拷贝,剪切,创建) NSFileManager使用了单例模式(Singleton) 使用defaultManager可 ...
- spring MVC 资料
1.web.xmlorg.springframework.web.filter.CharacterEncodingFilter;配置字符编码,配置示例: <filter> <filt ...
- 数据类型、常量、变量、printf、scanf和运算符
数据类型 常量 变量 printf函数介绍 scanf函数介绍 运算符 数据类型 数据类型是指数据在内存中存储的方式. C语言中有5大数据类型:基本类型.构造类型.指针类型.空类型.定义类型. C语言 ...
- 安装Windows 7
-EndFragment--> 1.安装win7_64位步骤: https://www.douban.com/note/224102684/ 安装Win7系统为硬盘分区的方法 笨小康2012-0 ...
- batchInsert xml 配置 ibatis
<insert id="tops_visa_openapi_jvisaproduct.batchinsert" parameterClass="java.util. ...
- 记一次酷派尚锋Y75刷机
昨天因为手机卡的原因,我的同学帮他的同学刷机,听他说是用刷机精灵线刷的rom包,但是刷机失败了,就来找我把弄好,他是个半吊子水平,刚接触这个东西,也是运气不好,什么刷机失败的问题都让他遇上了,刷了几个 ...
- eclipse 高亮代码
本文整合自网络上的两种靠谱的使eclipse代码高亮的方式. 其实你可以在Window->proferences->java->editor->syndex coloring- ...