l

src/toCanvas.ts

@@ -30,6 +30,7 @@ interface INodeData {
 	src?: string,
 	borderRadius?: string,
 	img?: HTMLImageElement,//加载后挂上的
+	imgBg?: HTMLImageElement,//背景图加载后挂上的
 	//文本需要
 	text?: string
 	color?: string,
@@ -38,6 +39,12 @@ interface INodeData {
 	wordWrap?: "break-word" | null
 	textAlign?: "center" | "left" | "right"
 	fontStyle?: "normal" | "italic" | "oblique"
+
+	//后面加的属性
+	'backgroundColor'?,
+	'backgroundImage'?,
+	'borderColor'?,
+	'borderWidth'?,
 }
 
 export interface RenderOptions {
@@ -68,21 +75,44 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 	//先加载完所有图片
 	let p: Promise<void>[] = [];
 	nodes.forEach((n) => {
-		if (n.type !== NodeType.IMAGE) return;
-		p.push(
-			new Promise((r) => {
-				let img = new Image();
-				img.crossOrigin = 'anonymous'
-				img.onload = () => {
-					n.img = img;
-					r()
-				}
-				img.src = n.src;
-			})
-		)
+		if (n.type == NodeType.IMAGE) {//图片标签
+			p.push(
+				new Promise((r) => {
+					let img = new Image();
+					img.crossOrigin = 'anonymous'
+					img.onload = () => {
+						n.img = img;
+						r()
+					}
+					img.src = n.src;
+				})
+			)
+		}
+		//背景图片标签
+		if (n.backgroundImage) {
+			p.push(
+				new Promise((r) => {
+					let img = new Image();
+					img.crossOrigin = 'anonymous'
+					img.onload = () => {
+						n.imgBg = img;
+						r()
+					}
+					img.src = n.backgroundImage.replace('url("', "").replace('")', "");
+				})
+			)
+		}
 	})
 	if (p.length) await Promise.all(p);
 	nodes.forEach((n) => {
+		//通用属性先绘制,背景颜色,边框等等
+		//背景颜色
+		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:
 			case NodeType.CANVAS:
@@ -122,29 +152,7 @@ function drawImage(data: INodeData, ctx: CanvasRenderingContext2D, scale: number
 
 	if (borderRadius) {//有圆角,画遮罩,暂时只管一个
 		ctx.save();
-		let max = (width < height ? width : height) / 2;
-		let radius = Math.min(borderRadius, max);
-		// ctx.beginPath();
-		// ctx.moveTo(x, y + radius);
-		// ctx.quadraticCurveTo(x, y, x + radius, y);
-		// ctx.lineTo(x + width - radius, y);
-		// ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-		// ctx.lineTo(x + width, y + height - radius);
-		// ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-		// ctx.lineTo(x + radius, y + height);
-		// ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-		// ctx.lineTo(x, y + radius);
-		// ctx.clip();
-		ctx.beginPath();
-		ctx.moveTo(x + width - radius, y);
-		ctx.arcTo(x + width, y, x + width, y + radius, radius)
-		ctx.lineTo(x + width, y + height - radius)
-		ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius)
-		ctx.lineTo(x + radius, y + height)
-		ctx.arcTo(x, y + height, x, y + height - radius, radius)
-		ctx.lineTo(x, y + radius)
-		ctx.arcTo(x, y, x + radius, y, radius)
-		ctx.closePath();
+		borderRadiusPath(data, ctx, scale)
 		ctx.clip();
 	}
 	ctx.drawImage(img, x, y, width, height)
@@ -227,3 +235,89 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D, scale: number)
 		ctx.fillText(text, x, y + height)
 	}
 }
+
+
+function drawBackgroundColor(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
+	let {
+		x, y, width, height,
+		backgroundColor,
+		borderRadius: borderRadiusTxt
+	} = data;
+	x *= scale;
+	y *= scale;
+	width *= scale;
+	height *= scale;
+
+	ctx.fillStyle = backgroundColor;
+	let borderRadius = parseFloat(borderRadiusTxt) * scale;
+	if (borderRadius) {//有圆角,画遮罩,暂时只管一个
+		borderRadiusPath(data, ctx, scale)
+		ctx.fill();
+	} else {
+		ctx.fillRect(x, y, width, height)
+	}
+}
+
+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";
+	ctx.miterLimit = 0;
+	ctx.strokeStyle = borderColor;
+	if (borderRadius) {
+		borderRadiusPath(data, ctx, scale)
+		ctx.stroke();
+	} else {
+		ctx.strokeRect(x, y, width, height)
+	}
+}
+
+
+function borderRadiusPath(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
+	let {
+		x, y, width, height, borderRadius: borderRadiusTxt
+	} = data;
+	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);
+		// ctx.beginPath();
+		// ctx.moveTo(x, y + radius);
+		// ctx.quadraticCurveTo(x, y, x + radius, y);
+		// ctx.lineTo(x + width - radius, y);
+		// ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+		// ctx.lineTo(x + width, y + height - radius);
+		// ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+		// ctx.lineTo(x + radius, y + height);
+		// ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+		// ctx.lineTo(x, y + radius);
+		// ctx.clip();
+		ctx.beginPath();
+		ctx.moveTo(x + width - radius, y);
+		ctx.arcTo(x + width, y, x + width, y + radius, radius)
+		ctx.lineTo(x + width, y + height - radius)
+		ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius)
+		ctx.lineTo(x + radius, y + height)
+		ctx.arcTo(x, y + height, x, y + height - radius, radius)
+		ctx.lineTo(x, y + radius)
+		ctx.arcTo(x, y, x + radius, y, radius)
+		ctx.closePath();
+	}
+}
\ No newline at end of file

test.html

@@ -47,8 +47,8 @@
 <body>
 <div id="poster" class="poster">
 	<div class="bg"></div>
-	<!--<img class="avatar" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png"/>
-	<canvas id="canvas" style="position: absolute; left: 10px; top: 10px;"></canvas>
+	<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
 	</p>-->

types/config.d.ts

+/**
+ * Created by rockyl on 2021/1/26.
+ */
+export declare const debugMode: any;

types/toCanvas.d.ts

@@ -27,6 +27,7 @@ interface INodeData {
     src?: string;
     borderRadius?: string;
     img?: HTMLImageElement;
+    imgBg?: HTMLImageElement;
     text?: string;
     color?: string;
     fontSize?: string;
@@ -34,6 +35,10 @@ interface INodeData {
     wordWrap?: "break-word" | null;
     textAlign?: "center" | "left" | "right";
     fontStyle?: "normal" | "italic" | "oblique";
+    'backgroundColor'?: any;
+    'backgroundImage'?: any;
+    'borderColor'?: any;
+    'borderWidth'?: any;
 }
 export interface RenderOptions {
     scale?: number;