浅析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 相关文章推荐
JavaScript 更严格的相等 [译]
Sep 20 Javascript
Javascript学习指南
Dec 01 Javascript
jquery操作angularjs对象
Jun 26 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
在字符串中把网址改成超级链接
2006/10/09 PHP
php生成QRcode实例
2014/09/22 PHP
浅谈PHP进程管理
2019/03/08 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
列表内容的选择
2006/06/30 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python使用chardet判断字符编码
2015/05/09 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python 下载及安装详细步骤
2019/11/04 Python
Pytorch之Variable的用法
2019/12/31 Python
pandas apply多线程实现代码
2020/08/17 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
自荐信的五个重要部分
2013/10/29 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
2015年元旦标语大全
2014/12/09 职场文书
秋收起义观后感
2015/06/11 职场文书
学校远程教育工作总结
2015/08/11 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js