support border

package.json

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

src/dom-parser.ts

@@ -109,7 +109,7 @@ export function parseDom(el: HTMLElement = document.body) {
 			vNode.height = height
 
 			if (asMask) {
-				childNode.__maskBegin = true
+				childNode.__vNode = vNode
 				vNode.maskBegin = true
 			}
 
@@ -123,10 +123,12 @@ export function parseDom(el: HTMLElement = document.body) {
 			nodes.push(vNode)
 		}
 	}, function (childNode) {
-		if (childNode.__maskBegin) {
+		if (childNode.__vNode) {
+			const host = childNode.__vNode
 			nodes.push({
 				type: 0,
 				maskEnd: true,
+				host,
 			})
 		}
 	})

src/toCanvas.ts

@@ -45,6 +45,7 @@ interface INodeData {
 	'backgroundImage'?,
 	'borderColor'?,
 	'borderWidth'?,
+	'host'?,
 
 	maskBegin?: boolean,
 	maskEnd?: boolean,
@@ -64,10 +65,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
 
@@ -131,8 +132,6 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 		if (n.backgroundColor) drawBackgroundColor(n, ctx, scale)
 		//背景图片
 		if (n.backgroundImage) ctx.drawImage(n.imgBg, n.x * scale, n.y * scale, n.width * scale, n.height * scale)
-		//边框
-		if (n.borderWidth) drawBorder(n, ctx, scale)
 
 		switch (n.type) {
 			case NodeType.IMAGE:
@@ -144,6 +143,11 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 				break
 		}
 
+		if (n.host) {
+			//边框
+			if (n.host.borderWidth) drawBorder(n.host, ctx, scale)
+		}
+
 		if (n.maskEnd) {
 			ctx.restore();
 		}
@@ -157,6 +161,8 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 			break
 	}
 
+	//document.body.appendChild(canvas)
+
 	callback && callback(result)
 	return result
 }
@@ -168,7 +174,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
@@ -292,42 +298,50 @@ function drawBackgroundColor(data: INodeData, ctx: CanvasRenderingContext2D, sca
 function drawBorder(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
 	let {
 		x, y, width, height,
-
 		borderRadius: borderRadiusTxt,
 		borderWidth: borderWidthTxt,
 		borderColor
 	} = data
 	let borderRadius = parseFloat(borderRadiusTxt) * scale
-	let borderWidth = parseFloat(borderWidthTxt) * scale
-	x *= scale
-	y *= scale
-	width *= scale
-	height *= scale
-	ctx.lineWidth = borderWidth
-	ctx.lineCap = "round"
-	ctx.lineJoin = "round"
+	let borderWidth = parseInt(borderWidthTxt) * scale
+
+	//ctx.lineCap = "round"
+	//ctx.lineJoin = "round"
 	ctx.miterLimit = 0
 	ctx.strokeStyle = borderColor
 	if (borderRadius) {
+		ctx.lineWidth = borderWidth * 2
 		borderRadiusPath(data, ctx, scale)
 		ctx.stroke()
 	} else {
+		ctx.lineWidth = borderWidth
+		x *= scale
+		y *= scale
+		width *= scale
+		height *= scale
+		x += borderWidth / 2
+		y += borderWidth / 2
+		width -= borderWidth
+		height -= borderWidth
+
 		ctx.strokeRect(x, y, width, height)
 	}
 }
 
-
 function borderRadiusPath(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
 	let {
-		x, y, width, height, borderRadius: borderRadiusTxt
+		x, y, width, height,
+		borderRadius: borderRadiusTxt,
+		borderWidth: borderWidthTxt,
 	} = data
+
+	let borderRadius = parseFloat(borderRadiusTxt) * scale
+
 	x *= scale
 	y *= scale
 	width *= scale
 	height *= scale
 
-	let borderRadius = parseFloat(borderRadiusTxt) * scale
-
 	if (borderRadius) {//有圆角,画遮罩,暂时只管一个
 		let max = (width < height ? width : height) / 2
 		let radius = Math.min(borderRadius, max)

test.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>Title</title>
+	<title>HTML-SHOT</title>
 
 	<script src="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"></script>
 
@@ -12,17 +12,33 @@
 	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
 
 	<style>
+		*{
+			padding: 0;
+			margin: 0;
+		}
+
 		.poster {
 			position: relative;
-			background-color: orange;
-			border-radius: 2.00rem;
-			border: 0.1rem solid blue;
+			border-radius: 1.00rem;
+			border: 0.1rem solid orange;
 			width: 5.20rem;
 			height: 4.40rem;
 			overflow: scroll;
 			font-size: 0;
 		}
 
+		.inner-mask {
+			position: absolute;
+			border-radius: 1.00rem;
+			border: 0.05rem solid orangered;
+			left: 0.5rem;
+			top: 0.5rem;
+			width: 2rem;
+			height: 3rem;
+			overflow: scroll;
+			font-size: 0;
+		}
+
 		.bg {
 			background-image: url("//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png");
 			background-size: 100% 100%;
@@ -77,6 +93,9 @@
 	ReactDOM.render(
 		<div id="poster" className="poster">
 			<img src="https://yun.duiba.com.cn/aurora/assets/2e4adf3d8646ffbd027038cb2c6627a6bca44e44.jpg"/>
+			<div className="inner-mask">
+				<img src="https://yun.duiba.com.cn/aurora/assets/69acd42c0ce3ef567bbdf49c09d9f7cb86581d5a.png"/>
+			</div>{/**/}
 		</div>,
 		document.getElementById('app')
 	);