初探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(四)——作用域链和声明提前
前言:最近恰逢毕业季,千千万万的学生党开始步入社会,告别象牙塔似的学校生活.往往在人生的各个拐点的时候,情感丰富,感触颇深,各种对过去的美好的总结,对未来的展望.与此同时,也让诸多的老“园”工看完这些 ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- 初探JavaScript（二）——JS如何动态操控HTML
除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...
- 初探JavaScript（一）——也谈元素节点、属性节点、文本节点
Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...
- 【JavaScript从入门到精通】第四课初探JavaScript魅力-04
第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...
- 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
- 初探javascript
javascript是一种在网络广泛应用的脚本语言,虽然名字与java相近,但其实两者并没有直接的关系,脚本语言是一种为了便于操作和拓展功能而开发出来的解释性语言,不同于传统的编程语言,脚本语言不需要 ...
随机推荐
- 可视化之Earth NullSchool
上两篇我们分别介绍了<Berkeley Earth>和<AQICN>两个网站,今天来看一下Earth NullSchool. 这个网站的特色是风向图,之前有一篇可视化之风向图, ...
- [原创] 利用前端+php批量生成html文件，传入新文本，输出新的html文件
本人因为要想自己写个小说网站练练手,在其中遇到的一些问题,将其解决方法总结出来,例如: 1:小说网站存储了大量的小说,每个小说主页都很相似,url不同,不是使用的history属性改写的,所以如果人工 ...
- python爬虫 模拟登陆校园网-初级
最近跟同学学习爬虫的时候看到网上有个帖子,好像是山大校园网不稳定,用py做了个模拟登陆很有趣,于是我走上了一条不归路..... 先上一张校园网截图 首先弄清一下模拟登陆的原理: 1:服务器判定浏览器登 ...
- 【PHP】最详细PHP从入门到精通（三）——PHP中的数组常用函数汇总
PHP从入门到精通 之PHP中的数组常用函数详解 数组作为PHP中最常用的结构之一,PHP强大的数组函数功能,给数组的相关操作带来了极大的便利.今天给大家介绍的PHP中数组函数,是PHP数组中重要的 ...
- An impassioned circulation of affection
An impassioned circulation of affection time limit per test 2 seconds memory limit per test 256 mega ...
- Linux 中最常用的目录及文件管理命令
一.查看文件的命令 对于一个文本文件,在linux中有多种查看方式来获知文件内容,如直接显示整个文本内容.分页查看内容.或者只查看文件开头或末尾的部分内容.在linux可以用不同的命令来实现. 1. ...
- docker - 启动container时出现 [warning] : ipv4 forwarding is disabled. networking will not work
起因 今天在一台新的centos宿主机上安装docker,由于关闭了iptables,在此之后启动container的时候会出现警告: WARNING: IPv4 forwarding is disa ...
- php取出数组中的最大值
<?php /** * @param $arr * @return mixed * php取出数组中的最大值(方法一) */ function getMax($arr){ $max=$arr[0 ...
- 9.session的生命周期
1.创建 当客户端第一次访问某个jsp或者Servlet的时候,服务器会为当前会话创建一个SessionId,每次客户端向服务端发送请求的时候,都会将此SessionId携带过去,服务端会对此Sess ...
- 工厂方法模式（Java与Kotlin版）
前文推送 设计模式 简单工厂模式(Java与Kotlin版) Kotlin基础知识 Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次 ...