初始化代码

uniapp/uni-app/components/miniprogram_npm/wxml-to-canvas/index.vue

@@ -0,0 +1,109 @@
+<template>
+	<view>
+		<canvas id="canvas" type="2d" :style="'width: ' + width + 'px; height: ' + height + 'px;'"></canvas>
+	</view>
+</template>
+
+<script>
+	const xmlParse = require("./xml-parser");
+	const {
+		Widget
+	} = require("./widget");
+	const {
+		Draw
+	} = require("./draw");
+
+	export default {
+		data() {
+			return {};
+		},
+
+		components: {},
+		props: {
+			width: {
+				type: Number,
+				default: 400
+			},
+			height: {
+				type: Number,
+				default: 300
+			}
+		},
+
+		beforeMount() {
+			const dpr = wx.getSystemInfoSync().pixelRatio;
+			const query = this.createSelectorQuery();
+			this.dpr = dpr;
+			query.select('#canvas').fields({
+				node: true,
+				size: true
+			}).exec(res => {
+				console.log(res, "==res");
+				const canvas = res[0].node;
+				const ctx = canvas.getContext('2d');
+				canvas.width = res[0].width * dpr;
+				canvas.height = res[0].height * dpr;
+				ctx.scale(dpr, dpr);
+				this.ctx = ctx;
+				this.canvas = canvas;
+			});
+		},
+
+		methods: {
+			async renderToCanvas(args) {
+				const {
+					wxml,
+					style
+				} = args; // 清空画布
+
+				const ctx = this.ctx;
+				const canvas = this.canvas;
+
+				if (!ctx || !canvas) {
+					return Promise.reject(new Error('renderToCanvas: fail canvas has not been created'));
+				}
+
+				ctx.clearRect(0, 0, this.width, this.height);
+				const {
+					root: xom
+				} = xmlParse(wxml);
+				const widget = new Widget(xom, style);
+				const container = widget.init();
+				this.boundary = {
+					top: container.layoutBox.top,
+					left: container.layoutBox.left,
+					width: container.computedStyle.width,
+					height: container.computedStyle.height
+				};
+				const draw = new Draw(canvas, ctx);
+				await draw.drawNode(container);
+				return Promise.resolve(container);
+			},
+
+			canvasToTempFilePath(args = {}) {
+				return new Promise((resolve, reject) => {
+					const {
+						top,
+						left,
+						width,
+						height
+					} = this.boundary;
+					wx.canvasToTempFilePath({
+						x: left,
+						y: top,
+						width,
+						height,
+						destWidth: width * this.dpr,
+						destHeight: height * this.dpr,
+						canvas: this.canvas,
+						fileType: args.fileType || 'png',
+						quality: args.quality || 1,
+						success: resolve,
+						fail: reject
+					});
+				});
+			}
+
+		}
+	};
+</script>