init

62189bdd · rockyl · 62189bdd · 62189bdd · 62189bdd · 62189bdd
Commit 62189bdd authored Jan 11, 2021 by rockyl
Showing with 165 additions and 0 deletions

html-shot.iml html-shot.iml +9 -0

package.json package.json +10 -0

dom-parser.ts src/dom-parser.ts +91 -0

index.ts src/index.ts +8 -0

test.html test.html +37 -0

tsconfig.json tsconfig.json +10 -0

No files found.
--- a/html-shot.iml
+++ b/html-shot.iml
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
--- a/package.json
+++ b/package.json
+{
+  "name": "html-shot",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "tsc"
+  }
+}
--- a/src/dom-parser.ts
+++ b/src/dom-parser.ts
+/**
+ * Created by rockyl on 2021/1/11.
+ */
+
+const styleKeys = [
+	'fontSize',
+	'fontFamily',
+	'fontWeight',
+	'color',
+	'wordWrap',
+	'borderRadius',
+]
+
+export function parseDom(el: HTMLElement) {
+	const {left: pX, top: pY} = el.getBoundingClientRect();
+
+	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();
+
+					vNode = {
+						type: 0,
+					}
+				}
+			}
+		}
+		if (vNode) {
+			const {left, top, width, height} = bound;
+			vNode.x = left;
+			vNode.y = top;
+			vNode.width = width;
+			vNode.height = height;
+
+			let styles = getStylesWithoutDefaults(node);
+			for (let skey in styles) {
+				if (styleKeys.indexOf(skey) < 0) {
+					continue
+				}
+				vNode[skey] = styles[skey];
+			}
+
+			nodes.push(vNode);
+		}
+	});
+	return nodes;
+}
+
+function walkNode(root, callback) {
+	callback(root);
+
+	for (let i = 0, li = root.childNodes.length; i < li; i++) {
+		const childNode = root.childNodes[i];
+		walkNode(childNode, callback);
+	}
+}
+
+function getStylesWithoutDefaults(element) {
+	let dummy = document.createElement('element-' + (new Date().getTime()));
+	document.body.appendChild(dummy);
+
+	let defaultStyles = getComputedStyle(dummy);
+	let elementStyles = getComputedStyle(element);
+
+	let diff = {};
+	for (let key in elementStyles) {
+		if (elementStyles.hasOwnProperty(key)
+			&& defaultStyles[key] !== elementStyles[key]) {
+			diff[key] = elementStyles[key];
+		}
+	}
+
+	dummy.remove();
+
+	return diff;
+}
--- a/src/index.ts
+++ b/src/index.ts
+/**
+ * Created by rockyl on 2021/1/11.
+ */
+
+import {parseDom} from "./dom-parser.js";
+
+let data = parseDom(document.getElementById('poster'));
+console.log(data);
--- a/test.html
+++ b/test.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Title</title>
+
+	<style>
+			.poster{
+					position: relative;
+			}
+			.avatar{
+					border-radius: 100px;
+			}
+      .ppp {
+          color: green;
+          font-size: 50px;
+          font-weight: bold;
+		      position: absolute;
+		      left: 10px;
+		      top: 10px;
+		      text-align: center;
+		      word-wrap: normal;
+      }
+	</style>
+</head>
+<body>
+<div style="margin-top: 100px"></div>
+<div id="poster" class="poster">
+	<img class="avatar" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png"/>
+	<p class="ppp">
+		aa<br/><b>ddd</b>a
+	</p>
+</div>
+
+<script src="dist/index.js" type="module"></script>
+</body>
+</html>
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+	"compilerOptions": {
+		"module": "ES6",
+		"target": "ES2017",
+		"outDir": "dist"
+	},
+	"include": [
+		"src"
+	]
+}