初探JavaScript的截屏实现
最近参与了网易炉石盒子的相关页面开发，在做卡组分享页（地址：炉石盒子卡组分享），有个需求：用户可以把这个卡组以图片的形式分享给好友。最初的的做法是使用服务器把该页面转换成图片，然后把图片地址返回给前端。嗯，这样也挺好的啊，而且服务器还可以对转换出来的图片进行缓存，下次请求可以直接返回图片地址了。原理上是毫无毛病的。然而，问题来了，后台转换的图片和页面内容偶尔不一致，有时候会少了一一些内容，PM姐姐就很不爽了，说这个问题一定要解决。反正页面转成图片的接口是后台做的，关我luan事啊！就在暗暗自喜的时候，悲催的事情发生的，后台的同事说，因为页面里面有些内容是异步加载出来的（比如底部的二维码是通过canvas生成的）,服务器转换不稳定，有时候对异步渲染的内容无法截取。说白了，就是这问题他没有办法解决，前端去改吧，谁叫前端用了异步渲染呢？最后Leader让我尝试能不能直接用JS进行截图了，这样既可以减轻服务器的压力，又可以解决上面bug。
一开始，我觉得使用JS截图的想法是非常荒谬的（怪我无知咯，前端这几年发展的实在太快了）：首先JS没有权限调用操作系统的截图功能，其次，浏览器（BOM）也没有提供相关的截图接口。我该怎么办呢、怎么办呢？有事找Google啊。然后搜索了一下： JS html to png ,然后来到就找到了这里：render-html-to-an-image。开始有思路了，回答中有人提到可以把dom转成canvas，嗯！又是Canvas！我不由得兴奋起来，真的是山重水复疑无路，柳暗花明又一村啊！然后再搜索一下 dom to canvas，来到了大家熟知的mdn的文档Drawing_DOM_objects_into_a_canvas。然后就开始认（zhuang）真(bi)的看文档。文档开头就说到，不可以把dom转成canvas，但是可以把dom转成svg，然后再把svg画到canvas里面去。也许有人会问，为什么要先把dom转成svg呢？这可能是因为svg使用xml表示、结构和dom一致吧。
下面就是官方文档的step by step的教程:
1.Blob的媒体类型必须是
"image/svg+xml"
2.需要一个svg元素
3.在svg元素里面插入一个foreignObject元素
4.在foreignObject元素里面放入符合规范的html
把dom转成canvas就这么简单，就上面几个步骤。下面是文档给出的一上简单的demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
</script>
</body>
</html>
复制代码，运行一下，哇，帅呆了，浏览器上出现了超酷的两行艺术字呢！
嗯，原来dom转成canvas这么简单啊？那我通过 document.body.innerHTML 把body里面的所有dom取出来，然后放到 foreignObject 元素里面，不就OK了、把整个页面都截取下来了吗？
demo仅仅是个Hello World，但是实际项目中的Dom结构比这个复杂多了，比如，引入了外部样式表、图片、而且还可能某些标签不符合xml规范（如缺少闭合标签等）。下面的举个简单的例子，.container不是使用行内样式的，而是在style标签里面定义，字体红色，转成图片后，样式不生效。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
color: red;
}
</style>
</head>
<body>
<div class="container" >
Hello World!
</div>
<canvas id="canvas" style="border:2px solid black;" width=200" height="200">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
document.querySelector('.container').innerHTML +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
</script>
</body>
</html>
既然外部样式不生效，那我们可以通过JS遍历所有的dom元素，把全部的样式通过element.style对象添加到行内样式啊。这个思路听起来不错，但是，实现这个把外部样式转成行内样式的函数我还真写不出来啊。需求比较紧，也没有那 多时间去瞎折腾了，所以，就想找找有没有现成的库。于是又去google一下。很幸运， 一下子就搜到了一个叫做html2canvas的库，非常棒的一个库，很强大、但用法非常简单.就这么简单的方法，就可以把我的整个页面截图下来了：
function convertHtml2Canvas() {
html2canvas(document.body, {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
document.body.appendChild(canvas);
}).catch(function(e) {
console.error('error', e);
});
}
目前还有一个问题，就是这种方法默认是把整个页面截取下来的（就是说，会以你的innerHeight和innerWidth为边界，会存在大量的空白），可是，我的卡组只是占了页面的一小部分，我只想要卡组的部分啊。这只需要把document.body修改成你想要截取的元素就行了。完整的demo如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.card {
width: 354px;
}
.card img.cover {
width: 100%;
}
.card .user-name {
text-align: center;
}
</style>
</head>
<body>
<div class="app">
<div class="card">
<img class="cover" src="https://ok.166.net/audiozhurong/nielian/2018/07/04/0F231F5194F0F2F1530673285.png" alt="">
<div class="user-name">素问小姐姐</div>
</div>
</div>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js">
</script>
<script>
html2canvas(document.querySelector('.card'), {
allowTaint: true // 允许加载跨域资源
}).then(function(canvas) {
document.body.appendChild(canvas);
});
</script>
</body>
</html>
效果图:
关于JS页面截图的就写到这里啦，因为也只刚刚接触，很多东西也理解得不到位，欢迎各大神指点。后面会深入学习一下html2canvas的源码，进一步理解dom to canvas的原理。
初探JavaScript的截屏实现的更多相关文章
- Javascript网页截屏的方法
最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上.目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果. 之前我曾写过如何将canvas图形转换成 ...
- WordPress 3.7.1-web截屏插件整合教程-Xproer.ScreenCapture
插件下载(PHP):wordpress 3.7.1, 说明:由于许多插件可能使用相同钩子,导致冲突,所以提供手支方式整合. 1.上传插件目录. 说明:WordPress 3.7.1 使用的是TinyM ...
- javascript实现当前页面截屏
javascript实现当前页面截屏 一.前言 有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果.比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存.但又不能安装任 ...
- 使用 JavaScript 截屏
经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...
- 利用PhantomJS进行网页截屏，完美解决截取高度的问题
关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...
- PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)
PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...
- nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储
近来研究了下phantomjs,只是初涉,还谈不上深入研究,首先介绍下什么是phantomjs. 官网上的介绍是:”PhantomJS is a headless WebKit scriptable ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- 让编辑器支持word的复制黏贴,支持截屏的黏贴
chrome有很多人性化的API,比如拖拽, 比如图片可以转化为base64等: 比如知乎上面的回复中可以直接黏贴图片, 就不需要手动点击图片上传按钮, 选择图片, 确认上传等等: 知乎参考地址:打 ...
随机推荐
- 前端UI框架选择区别对比推荐
UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...
- jenkins配置QQ邮箱自动发送RF测试构建结果通知邮件
声明:转载请注明出处,谢谢 首先确认QQ邮箱SMTP服务器的地址和端口号.如下图所示,请谨记,JENKINS全局邮箱配置需要使用: 步骤1:开启QQ邮箱的smtp服务:登陆QQ邮箱-设置-账户-开启P ...
- minitab笔记
1.如何用minitab检测一组数据是否服从正态分布 打开Minitab之后点击Stat>Basic Statistics> Normality Test,分析之后若 P value(P值 ...
- django内置的认证系统
Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...
- libcurl编译使用，实现ftp功能
Libcurl实现ftp的下载,上传功能.版本为curl-7.63.0 1.编译vs2015 参考资料:https://blog.csdn.net/yaojingkao/article/details ...
- 蒙特·卡罗方法（Monte Carlo method）
蒙特·卡罗方法(Monte Carlo method),也称统计模拟方法,是二十世纪四十年代中期由于科学技术的发展和电子计算机的发明,而被提出的一种以概率统计理论为指导的一类非常重要的数值计算方法.是 ...
- VS2017调试技巧
Visual Studio的调试技巧 调试技巧是衡量程序员水平的一个重要指标.掌握好的调试技巧与工具的使用方法,也是非常重要的.*** 演示环境: VS2017C#*** 演示用的代码: publ ...
- ajax请求本地文件
这是一个小随笔,真的很简短! 主要入坑点有两个 一.Chrome浏览器默认不支持ajax读取本地文件 解决:1.关闭所有Chrome网页 2.右击Chrome浏览器,打开“属性” 3.弹出属性 ...
- 关于规范NOIP试题管理办法的通知
由CCF主办的NOIP赛事举行在即,保密起见,现将有关规定发给各省赛区组织单位. 1.NOI各省组织单位负责试题保密工作. 2.NOIP初赛试卷为纸质版,复赛试卷为电子版. 3.在初赛进行中,如有选手 ...
- .net ORM框架(Dapper简单应用)
1.引入 Dapper.dll类库 2.创建书籍模型book using System; using System.Collections.Generic; using System.Linq; us ...