canvas支持

bbc45333 · rockyl · 7502863a · bbc45333 · bbc45333 · bbc45333
Commit bbc45333 authored Jan 19, 2021 by rockyl
7 changed files
--- a/package.json
+++ b/package.json
 {
 	"name": "html-shot",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"main": "dist/index.js",
 	"types": "types/index.d.ts",
 	"license": "MIT",

--- a/readme.md
+++ b/readme.md
@@ -21,7 +21,7 @@ document.body.appendChild(img);
 | `qaulity` | number | 否 | 0.7 | 导出图片质量 |

 ## 注意点
-* 仅支持img和text两种元素
+* 仅支持的元素有：img、text、canvas(svga/spine/lottie)
 * 不支持transform变换
 * 文本仅只是Arial字体，建议给元素设置为Arial字体
 * 不支持z-index样式

--- a/src/dom-parser.ts
+++ b/src/dom-parser.ts
@@ -18,30 +18,42 @@ export function parseDom(el: HTMLElement = document.body) {
 	let nodes = [];
 	walkNode(el, function (childNode) {
 		let vNode, bound, node;
-		if (childNode.nodeName === 'IMG') { //其他全部认为是文本
-			node = childNode;
-			vNode = {
-				type: 1,
-				src: childNode.src,
-			}
-			bound = childNode.getBoundingClientRect();
-		} else {
-			if (childNode.data) {
-				node = childNode.parentElement;
-				let text = childNode.data.trim();
-				if (text) {  //过滤空文本
-					let range = document.createRange();
-					range.selectNode(childNode);
-					bound = range.getBoundingClientRect();
-					range.detach();
+		switch(childNode.nodeName){
+			case 'IMG':
+				node = childNode;
+				vNode = {
+					type: 1,
+					src: childNode.src,
+				}
+				bound = childNode.getBoundingClientRect();
+				break;
+			case 'CANVAS':
+				node = childNode;
+				vNode = {
+					type: 2,
+					img: childNode,
+				}
+				bound = childNode.getBoundingClientRect();
+				break;
+			default:
+				if (childNode.data) {
+					node = childNode.parentElement;
+					let text = childNode.data.trim();
+					if (text) {  //过滤空文本
+						let range = document.createRange();
+						range.selectNode(childNode);
+						bound = range.getBoundingClientRect();
+						range.detach();

-					vNode = {
-						type: 0,
-						text,
+						vNode = {
+							type: 0,
+							text,
+						}
 					}
 				}
-			}
+				break;
 		}
+
 		if (vNode) {
 			const {left, top, width, height} = bound;
 			vNode.x = left - pX;
@@ -60,6 +72,7 @@ export function parseDom(el: HTMLElement = document.body) {
 			nodes.push(vNode);
 		}
 	});
+
 	return {
 		width,
 		height,

--- a/src/toCanvas.ts
+++ b/src/toCanvas.ts
@@ -12,7 +12,8 @@ interface ICData {
 */
 enum NodeType {
    TEXT = 0,
-    IMAGE
+    IMAGE,
+    CANVAS,
 }

 /**
@@ -78,6 +79,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
    nodes.forEach((n) => {
        switch (n.type) {
            case NodeType.IMAGE:
+            case NodeType.CANVAS:
                drawImage(n, ctx)
                break
            case NodeType.TEXT:

--- a/test.html
+++ b/test.html
@@ -29,15 +29,23 @@
 		      font-style: italic;
      }
 	</style>
+
 </head>
 <body>
 <div id="poster" class="poster">
 	<img class="avatar" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png"/>
+	<canvas id="canvas" style="position: absolute; left: 10px; top: 10px;"></canvas>
 	<p class="ppp">
 		a<br/>bcdefghij
 	</p>
 </div>

+<script>
+	let canvas = document.getElementById('canvas');
+	let context = canvas.getContext('2d');
+	context.fillRect(0, 0, 50, 30);
+</script>
 <script src="test.js" type="module"></script>
+<button id="button">截图</button>
 </body>
 </html>
--- a/test.js
+++ b/test.js
@@ -4,9 +4,11 @@

 import {htmlShot} from "./dist/index.js";

-(async function () {
-	const result = await htmlShot(undefined, {type: 'png'});
+async function shot() {
+	const result = await htmlShot(document.getElementById('poster'), {type: 'png'});
 	let img = new Image();
 	img.src = result;
 	document.body.appendChild(img);
-})();
+}
+
+document.getElementById('button').onclick = shot;
--- a/types/toCanvas.d.ts
+++ b/types/toCanvas.d.ts
@@ -11,7 +11,8 @@ interface ICData {
 */
 declare enum NodeType {
    TEXT = 0,
-    IMAGE = 1
+    IMAGE = 1,
+    CANVAS = 2
 }
 /**
 * 节点数据