浅析js实现网页截图的两种方式


Posted in Javascript onNovember 01, 2019

Web端的截图(生成图片)并不算是个高频的需求,资料自然也不算多,查来查去,也不过Canvas 和 SVG两种实现方案,原理大概相似,都非真正义上的截图而是把DOM转为图片,然而实现方式却截然不同。

Canvas 实现

如何将dom转换成canvas图片?自然是要一点点画到canvas里,想想都是件麻烦事。通过分析github的知名截图库 niklasvh/html2canvas (7k+ star)的源码,梳理了其大致的思路:

  • 递归取出目标模版的所有DOM节点,填充到一个rederList,并附加是否为顶层元素/包含内容的容器 等信息
  • 通过z-index postion float等css属性和元素的层级信息将rederList排序,计算出一个canvas的renderQueue
  • 遍历renderQueue,将css样式转为setFillStyle可识别的参数,依据nodeType调用相对应canvas方法,如文本则调用fillText,图片drawImage,设置背景色的div调用fillRect等
  • 将画好的canvas填充进页面

无论是排序优先级的计算还是从css到canvas的转换,毫无疑问都是些巨麻烦的事,尤其是放在真实的业务场景里,DOM模版中往往会包含复杂的样式与排版,html2canvas 足足用了20多个js来实现这层转换,复杂成度可见一斑。索性,我们不需要再重新造一遍轮子。

使用canvas转化的话灵活性较高,环境依赖上也只需要确保浏览器支持canvas就可以了,但它有个显著的缺点:慢。原因自然是因为大量的计算与递归调用,这是无可避免的。不过html2canvas代码中大量使用了Promise,所以html2canvas 支持异步操作。

限制:

  • 无法跨域跨域资源
  • 无法渲染iframe,flash等内容,但目前支持svg

值得一提的是,尽管html2canvas主页表示它还处于实验室环境,但自14年起便已经被Twitter 等用在了生产环境,所以虽然有诸多限制,稳定性应该还是保障的。

canvas如此复杂,那么有没有一种更简单的方法呢?

自然是有的,那便是SVG

SVG实现

首先,svg本来就是矢量图形;其次,svg是可以用xml描述的;再其次,用来描述svg的标签里有个 foreignObject标签,这个标签可以加载其它命名空间的xml(xhtml)文档。也就是说,如果使用svg的话,我们不再需要一点点的遍历,转换节点;不用再计算复杂的元素优先级,只需要一股脑的将要渲染的DOM扔进<foreignObject></foreignObject>就好了,剩下的就交给浏览器去渲染。

让我们理一理思路:

  • 首先,我们要声明一个基础的svg模版,这个模版需要一些基础的描述信息,最重要的,它要有<foreignObject></foreignObject>这对标签
  • 将要渲染的DOM模版模版嵌入foreignObject
  • 利用Blob构建svg图像
  • 取出URL,赋值给
<div id='text'>
    <h1 style="background-color: #ccc;width: 200px;height: 200px;" >Hello World</h1>
  </div>
//此代码仅在chrome测试下通过
function html2Svg (domStr) { 
      //创建模版字符串
      var svgXML=
      `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <foreignObject width="100%" height="100%">${generateXML(html)}</foreignObject>
       </svg>`
      //利用Blob创建svg
      var svg = new Blob([svgXML], {type: 'image/svg+xml'})
      //利用DOMURL.createObjectURL取出对象
      var url = window.URL.createObjectURL(svg);
      var img = new Image()
      img.src = url
      return img
    }

// 由于`foreignObject`只能引用XML文档,
// 所以我们需要对DOM进行格式化
function generateXML (domStr) { 
    var doc = document.implementation.createHTMLDocument('');
      doc.write(html);
      doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
      doc = parseStyle(doc)
      console.log(doc)
      html = (new XMLSerializer).serializeToString(doc).replace('<!DOCTYPE html>','');
      return html
}

可以看到按这个思路来实现非常简单,并且没有了复杂的计算和递归,渲染速度自然要优于前者。然而使用svg,需要考虑诸多的限制问题。一个最为严肃的问题在于:SVG无法加载外部资源,也就是说,在svg里面,无论是还是 或者css中的背景图,这些资源都是无法加载的。在使用canvas实现时,因为我们是一个node一个node去画,所以不存在资源引用的问题。但使用svg实现,相当于我们把文档交给SVG再来来渲染一遍,这对于我们来说是其实是无法控制的黑盒操作,是受SVG限制的

万幸,一个昵称为Christoph Burgmer的小哥写了一个名为rasterizeHTML.js 的库,通过一系列的hack技巧替我们绕过了许多限制。我知道你很好奇他是怎么做到的。 简单来讲,rasterizeHTML.js在我们的基础实现上做了这些hack:

  • 将<img/>的url 转为 dataURI
  • 将background-color从style中取出,修改url后重新插入样式表
  • 将link的的样式通过ajax down下来然后注入<style></sytle>
  • 详见源码...

当然, rasterizeHTML.js能帮我们做的也不过是处理资源引用问题和浏览器兼容问题,更多的SVG的限制是无法绕过的,该库的文档正式列出了足足一整页的限制,让人读完后心中一凉。比如:

  • 跨域资源无法加载
  • 如lazyload等通过js加载的资源无法加载
  • 内联或js操作background-image无法加载
  • 详见文档

思考下rasterizeHTML.js的原理便可理解这些限制无法避免的原因: rasterizeHTML.js只能对已经存在的静态资源进行处理,而对js动态生成并不能实时处理。

目前rasterizeHTML.js已经被用于知乎-意见反馈功能。

参考

源码https://developer.mozilla.org/en-US/docs/Web/API/CanvasAPI/DrawingDOMobjectsintoacanvas

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
javascript使用链接跨域下载图片
Nov 01 #Javascript
async/await让异步操作同步执行的方法详解
Nov 01 #Javascript
浅谈Three.js截图并下载的大坑
Nov 01 #Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 #Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 #Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 #Javascript
js new Date()实例测试
Oct 31 #Javascript
You might like
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
Python常用模块用法分析
2014/09/08 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Python中Numpy mat的使用详解
2019/05/24 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
如何写出高性能的JSP和Servlet
2013/01/22 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
《童年的发现》教学反思
2014/02/14 职场文书
军训教官感言
2014/03/02 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
个人业务学习心得体会
2016/01/25 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python