Merge branch 'dev' of gitlab2.dui88.com:laoqifeng/html-shot into dev

node_modules/.yarn-integrity

+{
+  "systemParams": "darwin-x64-72",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [
+    "@spark/animation",
+    "@spark/api-base",
+    "@spark/api-common",
+    "@spark/common-helpers",
+    "@spark/projectx",
+    "@spark/share",
+    "@spark/ui",
+    "@spark/utils",
+    "alias-parser",
+    "code-mix",
+    "deviljs",
+    "duiba-utils",
+    "fyge",
+    "html-shot",
+    "init-project",
+    "package-readme-generator",
+    "props-compute",
+    "psd-parse-web",
+    "qunity",
+    "qunity-cli",
+    "qunity-pixi",
+    "qunity-scene",
+    "scss-simple-parser",
+    "sheet-packer",
+    "spark-cli",
+    "spark-test-lib",
+    "spark-utils",
+    "spark-wrapper-fyge",
+    "test",
+    "tiny-image",
+    "tree-dsl-react",
+    "visual-code",
+    "visual-process",
+    "zeroing-code-divider",
+    "zeroing-pack",
+    "zeroing-template-fill",
+    "zrender"
+  ],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
\ No newline at end of file

package.json

 {
 	"name": "html-shot",
-	"version": "1.0.13",
+	"version": "1.0.17",
 	"main": "dist/index.js",
 	"types": "types/index.d.ts",
 	"license": "MIT",

readme.md

@@ -20,6 +20,11 @@ document.body.appendChild(img);
 | `type` | 'canvas' | 'jpeg' | 'png' | 否 | 'png' | 导出类型 |
 | `qaulity` | number | 否 | 0.7 | 导出图片质量 |
 
+## 开启调试
+```js
+window['html-shot/debug-mode'] = true
+```
+
 ## 注意点
 * 仅支持的元素有：img、text、canvas(svga/spine/lottie)
 * 不支持transform变换

src/dom-parser.ts

@@ -28,9 +28,10 @@ const includeStyleKeys = [
 export function parseDom(el: HTMLElement = document.body) {
 	const {left: pX, top: pY, width, height} = el.getBoundingClientRect();
 
-	let nodes = [], skip = false;
+	let nodes = [];
 	walkNode(el, function (childNode) {
 		let vNode, bound, node, isText;
+		let skip = false;
 		switch (childNode.nodeName) {
 			case 'IMG':
 				node = childNode;

src/toCanvas.ts

@@ -61,10 +61,10 @@ export interface RenderOptions {
  * @return Promise<HTMLCanvasElement | string>
  */
 export async function toCanvas(data: ICData, options: RenderOptions = {}, callback?: (canvas: HTMLCanvasElement) => void): Promise<HTMLCanvasElement | string> {
-	const { type: exportType = 'png', quality = 0.7 } = options;
-	let { scale = window['devicePixelRatio'] || 1 } = options;
+	const {type: exportType = 'png', quality = 0.7} = options;
+	let {scale = window['devicePixelRatio'] || 1} = options;
 
-	let { nodes, width, height } = data;
+	let {nodes, width, height} = data;
 	width *= scale;
 	height *= scale;
 
@@ -77,12 +77,15 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 	nodes.forEach((n) => {
 		if (n.type == NodeType.IMAGE) {//图片标签
 			p.push(
-				new Promise((r) => {
+				new Promise((resolve, reject) => {
 					let img = new Image();
 					img.crossOrigin = 'anonymous'
 					img.onload = () => {
 						n.img = img;
-						r()
+						resolve()
+					}
+					img.onerror = () => {
+						reject(`html shot error: can't fetch image[${img.src}]`);
 					}
 					img.src = n.src;
 				})
@@ -91,14 +94,22 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 		//背景图片标签
 		if (n.backgroundImage) {
 			p.push(
-				new Promise((r) => {
+				new Promise((resolve, reject) => {
 					let img = new Image();
 					img.crossOrigin = 'anonymous'
 					img.onload = () => {
 						n.imgBg = img;
-						r()
+						resolve()
+					}
+					img.onerror = () => {
+						reject(`html shot error: can't fetch image[${img.src}]`);
+					}
+					let result = n.backgroundImage.match(/url\((.*)*\)/);
+					if (result) {
+						img.src = result[1].replace(/['"]/g, '');
+					} else {
+						reject(`html shot error: can't parse ${n.backgroundImage}`)
 					}
-					img.src = n.backgroundImage.replace('url("', "").replace('")', "");
 				})
 			)
 		}
@@ -143,7 +154,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
  * @param scale
  */
 function drawImage(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
-	let { x, y, img, width, height, borderRadius: borderRadiusTxt } = data;
+	let {x, y, img, width, height, borderRadius: borderRadiusTxt} = data;
 	x *= scale;
 	y *= scale;
 	width *= scale;
@@ -259,11 +270,13 @@ function drawBackgroundColor(data: INodeData, ctx: CanvasRenderingContext2D, sca
 }
 
 function drawBorder(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
-	let { x, y, width, height,
+	let {
+		x, y, width, height,
 
 		borderRadius: borderRadiusTxt,
 		borderWidth: borderWidthTxt,
-		borderColor } = data;
+		borderColor
+	} = data;
 	let borderRadius = parseFloat(borderRadiusTxt) * scale;
 	let borderWidth = parseFloat(borderWidthTxt) * scale;
 	x *= scale;
@@ -320,4 +333,4 @@ function borderRadiusPath(data: INodeData, ctx: CanvasRenderingContext2D, scale:
 		ctx.arcTo(x, y, x + radius, y, radius)
 		ctx.closePath();
 	}
-}
\ No newline at end of file
+}

test.html

@@ -12,6 +12,8 @@
           background-color: orange;
           border-radius: 2.00rem;
           border: 0.1rem solid blue;
+          width: 5.20rem;
+          height: 4.40rem;
       }
 
       .bg {
@@ -46,8 +48,8 @@
 </head>
 <body>
 <div id="poster" class="poster">
-	<div class="bg"></div>
-	<img class="avatar" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png"/>
+	<!--<div class="bg"></div>-->
+	<img class="avatar" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png" style="display: none"/>
 	<!--<canvas id="canvas" style="position: absolute; left: 10px; top: 10px;"></canvas>
 	<p class="ppp">
 		a<br/>bcdefghij

yarn.lock

+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+