支持解析背景和边框

src/dom-parser.ts

@@ -2,6 +2,13 @@
  * Created by rockyl on 2021/1/11.
  */
 
+const commonStyleKeys = [
+	'borderRadius',
+	'borderColor',
+	'borderStyle',
+	'borderWidth',
+]
+
 const styleKeys = [
 	'fontSize',
 	'fontWeight',
@@ -17,26 +24,24 @@ export function parseDom(el: HTMLElement = document.body) {
 
 	let nodes = [];
 	walkNode(el, function (childNode) {
-		let vNode, bound, node;
-		switch(childNode.nodeName){
+		let vNode, bound, node, isText;
+		switch (childNode.nodeName) {
 			case 'IMG':
 				node = childNode;
 				vNode = {
-					type: 1,
+					type: 2,
 					src: childNode.src,
 				}
-				bound = childNode.getBoundingClientRect();
 				break;
 			case 'CANVAS':
 				node = childNode;
 				vNode = {
-					type: 2,
+					type: 3,
 					img: childNode,
 				}
-				bound = childNode.getBoundingClientRect();
 				break;
-			default:
-				if (childNode.data) {
+			case '#text':
+				isText = true;
 				node = childNode.parentElement;
 				let text = childNode.data.trim();
 				if (text) {  //过滤空文本
@@ -46,22 +51,43 @@ export function parseDom(el: HTMLElement = document.body) {
 					range.detach();
 
 					vNode = {
-							type: 0,
+						type: 1,
 						text,
 					}
 				}
-				}
+				break;
+			default:
+
 				break;
 		}
+		if(!bound && childNode.getBoundingClientRect){
+			bound = childNode.getBoundingClientRect();
+		}
+
+		let styles = getStylesWithoutDefaults(node || childNode);
+
+		if (!isText) {
+			for(let skey of commonStyleKeys){
+				if(commonStyleKeys.indexOf(skey) < 0){
+					continue
+				}
 
-		if (vNode) {
+				if (!vNode) {
+					vNode = {
+						type: 0,
+					}
+				}
+				vNode[skey] = styles[skey];
+			}
+		}
+
+		if (vNode && bound) {
 			const {left, top, width, height} = bound;
 			vNode.x = left - pX;
 			vNode.y = top - pY;
 			vNode.width = width;
 			vNode.height = height;
 
-			let styles = getStylesWithoutDefaults(node);
 			for (let skey in styles) {
 				if (styleKeys.indexOf(skey) < 0) {
 					continue
@@ -72,7 +98,7 @@ export function parseDom(el: HTMLElement = document.body) {
 			nodes.push(vNode);
 		}
 	});
-
+	console.log(nodes);
 	return {
 		width,
 		height,
@@ -89,7 +115,7 @@ function walkNode(root, callback) {
 	}
 }
 
-function getStylesWithoutDefaults(element) {
+function getStylesWithoutDefaults(element): any {
 	let dummy = document.createElement('element-' + (new Date().getTime()));
 	document.body.appendChild(dummy);
 

src/toCanvas.ts

@@ -11,7 +11,8 @@ interface ICData {
  * 节点类型
  */
 enum NodeType {
-    TEXT = 0,
+    ANY = 0,
+    TEXT,
     IMAGE,
     CANVAS,
 }

test.html

@@ -9,6 +9,9 @@
 	<style>
 			.poster{
 					position: relative;
+					background-color: orange;
+          border-radius: 2.00rem;
+					border: 0.1rem solid blue;
 			}
 			.avatar{
 					border-radius: 1.00rem;
@@ -27,6 +30,7 @@
 		      word-wrap: break-word;
 		      font-family: Arial;
 		      font-style: italic;
+          background-color: red;
       }
 	</style>
 
@@ -36,7 +40,7 @@
 	<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
+		a<br/>bcde<span style="background-color: rgba(0,255,0,0.5);">span</span>fghij
 	</p>
 </div>
 

types/toCanvas.d.ts

@@ -10,9 +10,10 @@ interface ICData {
  * 节点类型
  */
 declare enum NodeType {
-    TEXT = 0,
-    IMAGE = 1,
-    CANVAS = 2
+    ANY = 0,
+    TEXT = 1,
+    IMAGE = 2,
+    CANVAS = 3
 }
 /**
  * 节点数据