init

src/config.ts

@@ -2,4 +2,4 @@
  * Created by rockyl on 2021/1/26.
  */
 
-export const debugMode = window['html-shot/debug-mode'] || false;
+export const debugMode = window['html-shot/debug-mode'] || false

src/dom-parser.ts

 /**
  * Created by rockyl on 2021/1/11.
  */
-import {debugMode} from "./config.js";
+import {debugMode} from "./config.js"
 
 const commonStyleKeys = [
 	'backgroundColor',
@@ -26,15 +26,15 @@ const includeStyleKeys = [
 ]
 
 export function parseDom(el: HTMLElement = document.body) {
-	const {left: pX, top: pY, width, height} = el.getBoundingClientRect();
+	const {left: pX, top: pY, width, height} = el.getBoundingClientRect()
 
-	let nodes = [];
+	let nodes = []
 	walkNode(el, function (childNode) {
-		let vNode, bound, node, isText;
-		let skip = false;
+		let vNode, bound, node, isText
+		let skip = false
 		switch (childNode.nodeName) {
 			case 'IMG':
-				node = childNode;
+				node = childNode
 				const src = node.getAttribute('src')  //必须使用此方法，使用node.src且为空时会返回当前页面链接
 				if (src) { //过滤src为空的图片
 					vNode = {
@@ -42,46 +42,46 @@ export function parseDom(el: HTMLElement = document.body) {
 						src,
 					}
 				}
-				break;
+				break
 			case 'CANVAS':
-				node = childNode;
+				node = childNode
 				vNode = {
 					type: 3,
 					img: node,
 				}
-				break;
+				break
 			case '#text':
-				isText = true;
-				node = childNode.parentElement;
-				let text = childNode.data.trim();
+				isText = true
+				node = childNode.parentElement
+				let text = childNode.data.trim()
 				if (text) {  //过滤空文本
-					let range = document.createRange();
-					range.selectNode(childNode);
-					bound = range.getBoundingClientRect();
-					range.detach();
+					let range = document.createRange()
+					range.selectNode(childNode)
+					bound = range.getBoundingClientRect()
+					range.detach()
 
 					vNode = {
 						type: 1,
 						text,
 					}
 				}
-				break;
+				break
 			case '#comment':
-				skip = true;
-				break;
+				skip = true
+				break
 			default:
 
-				break;
+				break
 		}
 		if (skip) {
-			return;
+			return
 		}
 
 		if (!bound && childNode.getBoundingClientRect) {
-			bound = childNode.getBoundingClientRect();
+			bound = childNode.getBoundingClientRect()
 		}
 
-		let styles = getStylesWithoutDefaults(node || childNode, includeStyleKeys);
+		let styles = getStylesWithoutDefaults(node || childNode, includeStyleKeys)
 
 		if (!isText) {
 			for (let skey of commonStyleKeys) {
@@ -95,64 +95,64 @@ export function parseDom(el: HTMLElement = document.body) {
 					}
 				}
 				if (styles[skey] !== undefined) {
-					vNode[skey] = styles[skey];
+					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;
+			const {left, top, width, height} = bound
+			vNode.x = left - pX
+			vNode.y = top - pY
+			vNode.width = width
+			vNode.height = height
 
 			for (let skey in styles) {
 				if (styleKeys.indexOf(skey) < 0) {
 					continue
 				}
-				vNode[skey] = styles[skey];
+				vNode[skey] = styles[skey]
 			}
 
-			nodes.push(vNode);
+			nodes.push(vNode)
 		}
-	});
+	})
 
 	if (debugMode) {
-		console.info(nodes);
+		console.info(nodes)
 	}
 
 	return {
 		width,
 		height,
 		nodes,
-	};
+	}
 }
 
 function walkNode(root, callback) {
-	callback(root);
+	callback(root)
 
 	for (let i = 0, li = root.childNodes.length; i < li; i++) {
-		const childNode = root.childNodes[i];
-		walkNode(childNode, callback);
+		const childNode = root.childNodes[i]
+		walkNode(childNode, callback)
 	}
 }
 
 function getStylesWithoutDefaults(element, includes: string[] = []): any {
-	let dummy = document.createElement('element-' + (new Date().getTime()));
-	document.body.appendChild(dummy);
+	let dummy = document.createElement('element-' + (new Date().getTime()))
+	document.body.appendChild(dummy)
 
-	let defaultStyles = getComputedStyle(dummy);
-	let elementStyles = getComputedStyle(element);
+	let defaultStyles = getComputedStyle(dummy)
+	let elementStyles = getComputedStyle(element)
 
-	let diff = {};
+	let diff = {}
 	for (let key in elementStyles) {
 		if (includes.indexOf(key) >= 0 || (elementStyles.hasOwnProperty(key) && defaultStyles[key] !== elementStyles[key])) {
-			diff[key] = elementStyles[key];
+			diff[key] = elementStyles[key]
 		}
 	}
 
-	dummy.remove();
+	dummy.remove()
 
-	return diff;
+	return diff
 }

src/index.ts

@@ -2,8 +2,8 @@
  * Created by rockyl on 2021/1/11.
  */
 
-import {parseDom} from "./dom-parser.js";
-import {RenderOptions, toCanvas} from "./toCanvas.js";
+import {parseDom} from "./dom-parser.js"
+import {RenderOptions, toCanvas} from "./toCanvas.js"
 
 /**
  * HTML截图