浏览器-在网页中使用自定义截图功能

总结一下目前了解到的网页截图功能实现

一 dom-to-image

1 npm地址:

https://www.npmjs.com/package/dom-to-image

2 介绍:

dom-to-image 是一个JS类库，它可以将任意DOM节点转换成 SVG/PNG/JPEG 格式的图像。它基于 domvas by Paul Bakaus 进行重写，修复了一些一至错误，并添加了部分功能（如web字体和图像支持）。

3 基本原理:

SVG的foreignObject标签可以包裹任意的html内容

递归地拷贝原始dom节点和后代节点；
把原始节点以及后代节点的样式递归的应用到对应的拷贝后的节点和后代节点上；
字体处理；
图片处理；
序列化拷贝后的节点，把它插入到foreignObject里面，然后组成一个svg，然后生成一个data URL；
如果想得到PNG内容或原始像素值，可以先使用data URL创建一个图片，使用一个离屏canvas渲染这张图片，然后从canvas中获取想要的数据。

4 弊端:

1.长时间未维护更新,最近更新是在4年前

2.存在外部资源无法正确加载情况

二 html2canvas

1 npm地址:

https://www.npmjs.com/package/html2canvas

2 官网及文档:

http://html2canvas.hertzen.com/

3 实现原理

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

4 部分问题处理

跨域方面: 配置allowTaint: false
截图锯齿:根据设备像素比进行缩放 const scale = window.devicePixelRatio;
对 css3 支持不好:不支持部分css3样式,如background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform等

但是好在该工具目前仍活跃更新,从最初不支持跨域到后来通过配置来解决跨域问题,是非常知名的截图库

三 js-web-screen-shot

1 npm地址:

https://www.npmjs.com/package/js-web-screen-shot

2 介绍:

一款带有工具条的功能十分强大的网页截图工具,目前仍在积极维护中,经历了近三十个版本迭代,最初版本于一年前发布,因功能完整,维护频繁,使用时需多留意更新版本,截取浏览器界面外部留意开启webRTC支持

3 原理分析:

https://juejin.cn/post/6924368956950052877

4 其它:

该库有对应的vue3版本可选择,如果在实际项目中有复杂的截图需求,并且项目是使用vue3开发的,可以使用该库:vue-web-screen-shot

参考文档:
https://juejin.cn/post/6844903465756393486
https://segmentfault.com/a/1190000037673677