Dom-to-image

实现原理

使用svg的一个特性，允许在<foreignobject>标签中包含任意的html内容。

主要是 [XMLSerializer |dom转为svg]

dom 转换为 XHTML
- XMLSerializer 对象使你能够把一个 XML 文档或 Node 对象转化或“序列化”为未解析的 XML 标记的一个字符串
- 要使用一个 XMLSerializer，使用不带参数的构造函数实例化它，然后调用其 serializeToString() 方法；

- 递归去克隆dom节点
- 遇到canvas转为image对象
- 提取元素computed样式,并且插到新建的style标签上面,对于":before,:after"这些伪元素，会提取其样式，放到新建样式名中并且插入到新建的style标签中，供所属的节点使用。
- 处理输入内容和svg。
- 插入字体
- - 获取所有样式表并处理为数组，提取包含 rule.type === CSSRule.FONT_FACE_RULE 规则，再提取包含 src 的 rules。
  - 下载资源，将资源转为dataUrl并给 src 使用。
- 处理图片
- - 图片都处理为dataUrl
- 示例一
使用svg中的<foreignobject>
- 序列化dom节点为字符串，然后在 foreignObject 嵌入转换好的字符串，
- foreignObject 能够在 svg 内部嵌入XHTML，再将svg处理为dataUrl数据
用 canvas 渲染出处理好的 dataUrl 数据
- 新建img
- img赋值已经组合好的dataUrl；
- img 转化为 canvas；
- - canvas.drawImage(image, dx, dy)
  - https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
canvas转化为 bold类型；
- canvas.toBlob(callback, type, encoderOptions);
- https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

// 示例一<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body onload="load()"><div id="long"><span>1111</span><h1>222222</h1>hello SeriousLose</div></body>
</html>
<script>function load() {let long = document.getElementById('long');let xmlStr = new XMLSerializer();let xml = xmlStr.serializeToString(long);console.log(xml);let dom = `data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><style>polygon { fill: black }div {color: white;font:12px serif;height: 100%;overflow: auto;}</style><polygon points="5,5 195,10 185,185 10,195" /><!-- Common use case: embed HTML text into SVG --><foreignObject x="20" y="20" width="160" height="160">${xml}</foreignObject></svg>`;let img = new Image();img.src = dom;document.body.appendChild(img);img.onload = () => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = img.naturalWidth;canvas.height = img.naturalHeight;ctx.drawImage(img, 0, 0);canvas.toBlob(function (blob) {let url = URL.createObjectURL(blob);const a = document.createElement('a');a.style.display = 'none';document.body.appendChild(a);a.href = url;a.download = 'image';a.click();window.URL.revokeObjectURL(url);}, 'image/png');};}
</script>

Dom-to-image相关推荐

【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
DOM相关内容(课程来源:B站后盾人)
课程来源:B站后盾人有关DOM的介绍在此引用一位大佬的博客的部分内容: JS-DOM https://blog.csdn.net/weixin_45077672/article/details/1 ...
获取DOM节点的几种方式
DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: d ...
java script DOM操作
---恢复内容开始--- 一.javascript功能: 1.进行数据运算 2.控制浏览器功能 3.控制元素的属性.样式.内容二.javascript书写位置 1.可以写在HTML文件的任意位置,书 ...
jQuery和dom的相互转换
1.将DOM对象转换成jQuery对象 $div = $(objDom); 2.将jQuery对象转换成DOM对象 objDom = $(objJqeury).get(0); 3.判断一个元素是否存在 ...
IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
以下代码在IE8下运行通过,在IE9中出错: document.createElement('<iframe id="yui-history-iframe" src=&quo ...
dom vue 加载完执行_前端面试题——Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...
php js怎么去掉类属性,如何修改DOM中的属性，类和样式
通过jQuery来获取要修改的DOM元素,然后通过JavaScript中方法来对属性.类以及样式进行修改今天在本篇文章中将分享的是如何通过修改html元素节点的样式,类和属性来进一步的更改dom,, ...
DOM+XPath提取规则注记！
下面是使用DOM+Xpath提取html中页面时经常使用的Xpath规则的一些示例: XPath相关的规则没有属性 //B[not(@*)] 没有类属性 //B[not(@class)] 要求链接有 ...
js里的document对象大全（DOM操作）
什么是DOM document object model 的简称,意思为文档对象模型.主要用来对文档中的html节点进行操作. Dom的操作简单示例: <div id="t1" ...

Dom-to-image

Dom-to-image相关推荐

最新文章

热门文章