初探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等: 比如知乎上面的回复中可以直接黏贴图片, 就不需要手动点击图片上传按钮, 选择图片, 确认上传等等: 知乎参考地址:打 ...

随机推荐

Family 科
拉丁语 familia 目--> 总科-->科-->亚科(亚科的拉丁文分类滋味通常是-inae) [族] 属
axios和promise
什么是axios axios is a promise based HTTP client for the browser and node.js Features: Make XMLHttpRequ ...
『流畅的Python』第13章：正确重载运算符
【C/C++】小坑们
1.printf("%03d", a); // 输出 a,占 3 位,不够则左边用 0 填充 2.memcpy 所在头文件为 <string.h> 3.string s ...
添加浏览器back操作时的响应事件
https://blog.csdn.net/xcqingfeng/article/details/70800118 $(function(){ pushHistory(); window.addEve ...
Python3+PyCharm+Django+Django REST framework开发教程
一.说明自己一是想跟上潮流二是习惯于直接干三是没有人可以请教,由于这三点经常搞得要死要活.之前只简单看过没写过Diango,没看过Django REST framework,今天一步到位直接上又撞上 ...
python之二分法查找
二分法查找主要的作用就是查找元素规则. 掐头结尾取中间, 必须是有序列 # 二分法查找 (需要你明白和掌握) # lst = [1,3,5,7,12,36,68,79] # n = int(inpu ...
scp ssh-key连接原理
scp ssh-key连接原理如何关闭位置解析 vim手动打开ssh的配置文件修改81行和122行,位置解析需要双方都关闭注意重点部分 ssh特别提醒 22端口信息连接 ...
ssh连接虚拟机centos
ssh连接虚拟机centos 虚拟机下CentOS7开启SSH连接注意:安装虚拟机的时候,网络一定选择桥接模式.
Hashmap的学习整理
这是我大致了解Hashmap的第一个博客:https://www.cnblogs.com/chengxiao/p/6059914.html 我将摘录里面的重点: 哈希表的主干就是数组存储位置 = f ...

初探JavaScript的截屏实现

初探JavaScript的截屏实现的更多相关文章

随机推荐

热门专题