auto commit

common/css/common.css

@@ -1,3 +1,4 @@
+/* 全屏状态栏占位 */
 .hold-status-bar{ height: var(--status-bar-height);width: 100%;display: none;}
 /* 全屏图片背景 */
 .page-bg-wrap{position: fixed;left: 0;right: 0;top: 0;bottom: 0;}

components/lime-painter/canvas.js

@@ -0,0 +1,42 @@
+export function adaptor(ctx) {
+	return Object.assign(ctx, {
+		setStrokeStyle(val) {
+			ctx.strokeStyle = val;
+		},
+		setLineWidth(val) {
+			ctx.lineWidth = val;
+		},
+		setLineCap(val) {
+			ctx.lineCap = val;
+		},
+		setFillStyle(val) {
+			ctx.fillStyle = val;
+		},
+		setFontSize(val) {
+			ctx.font = String(val);
+		},
+		setGlobalAlpha(val) {
+			ctx.globalAlpha = val;
+		},
+		setLineJoin(val) {
+			ctx.lineJoin = val;
+		},
+		setTextAlign(val) {
+			ctx.textAlign = val;
+		},
+		setMiterLimit(val) {
+			ctx.miterLimit = val;
+		},
+		setShadow(offsetX, offsetY, blur, color) {
+			ctx.shadowOffsetX = offsetX;
+			ctx.shadowOffsetY = offsetY;
+			ctx.shadowBlur = blur;
+			ctx.shadowColor = color;
+		},
+		setTextBaseline(val) {
+			ctx.textBaseline = val;
+		},
+		createCircularGradient() {},
+		draw() {},
+	});
+}

components/lime-painter/draw.js

@@ -0,0 +1,941 @@
+import { toPx, CHAR_WIDTH_SCALE_MAP, isNumber, getImageInfo  } from './utils'
+import { GD } from './gradient'
+import QR from './qrcode'
+let id = 0
+
+export class Draw {
+	constructor(context, canvas, use2dCanvas = false, isH5PathToBase64 = false, boundary) {
+		this.ctx = context
+		this.canvas = canvas || null
+		this.root = boundary
+		this.use2dCanvas = use2dCanvas
+		this.isH5PathToBase64 = isH5PathToBase64
+	}
+	roundRect(x, y, w, h, r, fill = false, stroke = false, ) {
+		if (r < 0) return
+		const {ctx} = this
+		ctx.beginPath()
+		if(!r) {
+			ctx.rect(x, y, w, h)
+		} else if(typeof r === 'number' && [0,1,-1].includes(w - r * 2) &&  [0, 1, -1].includes(h - r * 2)) {
+			ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 2)
+		} else {
+			let {
+				borderTopLeftRadius: tl = r || 0,
+				borderTopRightRadius: tr = r || 0,
+				borderBottomRightRadius: br = r || 0,
+				borderBottomLeftRadius: bl = r || 0
+			} = r || {r,r,r,r}
+			ctx.beginPath()
+			// 右下角
+			ctx.arc(x + w - br, y + h - br, br, 0, Math.PI * 0.5)
+			ctx.lineTo(x + bl, y + h)
+			// 左下角
+			ctx.arc(x + bl, y + h - bl, bl, Math.PI * 0.5, Math.PI)
+			ctx.lineTo(x, y + tl)
+			// 左上角
+			ctx.arc(x + tl, y + tl, tl, Math.PI, Math.PI * 1.5)
+			ctx.lineTo(x + w - tr, y)
+			// 右上角
+			ctx.arc(x + w - tr, y + tr, tr, Math.PI * 1.5, Math.PI * 2)
+			ctx.lineTo(x + w, y + h - br)
+		}
+		ctx.closePath()
+		if (stroke) ctx.stroke()
+		if (fill) ctx.fill()
+	}
+	measureText(text, fontSize) {
+		const { ctx } = this
+		// #ifndef APP-PLUS
+		return ctx.measureText(text).width
+		// #endif
+		// #ifdef APP-PLUS
+		// app measureText为0需要累加计算0
+		return text.split("").reduce((widthScaleSum, char) => {
+			let code = char.charCodeAt(0);
+			let widthScale = CHAR_WIDTH_SCALE_MAP[code - 0x20] || 1;
+			return widthScaleSum + widthScale;
+		  }, 0) * fontSize;
+		// #endif
+	}
+	setFont({fontFamily: ff = 'sans-serif', fontSize: fs = 14, fontWeight: fw = 'normal' , textStyle: ts = 'normal'}) {
+		let ctx = this.ctx
+		// 设置属性
+		// #ifndef MP-TOUTIAO
+		// fw = fw == 'bold' ? 'bold' : 'normal'
+		// ts = ts == 'italic' ? 'italic' : 'normal'
+		// #endif
+		// #ifdef MP-TOUTIAO
+		fw = fw == 'bold' ? 'bold' : ''
+		ts =  ts == 'italic' ? 'italic' : ''
+		// #endif
+		// fs = toPx(fs)
+		ctx.font = `${ts} ${fw} ${fs}px ${ff}`;
+	}
+	setTransform(box, {transform}) {
+		const {ctx} = this
+		const {
+			scaleX = 1,
+			scaleY = 1,
+			translateX = 0,
+			translateY = 0,
+			rotate = 0,
+			skewX = 0,
+			skewY = 0
+		} = transform || {}
+		let {
+			left: x,
+			top: y,
+			width: w,
+			height: h
+		} = box
+		
+		ctx.scale(scaleX, scaleY)
+		ctx.translate(
+			w * (scaleX > 0 ? 1 : -1) / 2 + (x + translateX) / scaleX,  
+			h * (scaleY > 0 ? 1 : -1) / 2 + (y + translateY) / scaleY) 
+		
+		if(rotate) {
+			ctx.rotate(rotate * Math.PI / 180)
+		}
+		if(skewX || skewY) {
+			ctx.transform(1, Math.tan(skewY * Math.PI/180), Math.tan(skewX * Math.PI/180), 1 , 0, 0)
+		}
+	}
+	setBackground(bd, w, h) {
+		const {ctx} = this
+		if (!bd) {
+			// #ifndef MP-TOUTIAO || MP-BAIDU
+			ctx.setFillStyle('transparent')
+			// #endif
+			// #ifdef MP-TOUTIAO || MP-BAIDU
+			ctx.setFillStyle('rgba(0,0,0,0)')
+			// #endif
+		} else if(GD.isGradient(bd)) {
+			GD.doGradient(bd, w, h, ctx);
+		} else {
+			ctx.setFillStyle(bd)
+		}
+	}
+	setShadow({boxShadow: bs = []}) {
+		// #ifndef APP-NVUE
+		const {ctx} = this
+		if (bs.length) {
+			const [x, y, b, c] = bs
+			ctx.setShadow(x, y, b, c)
+		}
+		// #endif
+	}
+	setBorder(box, style) {
+		const {ctx} = this
+		let {
+			left: x,
+			top: y,
+			width: w,
+			height: h
+		} = box
+		const {border, borderBottom, borderTop, borderRight, borderLeft, borderRadius: r, opacity = 1} = style;
+		const {
+			borderWidth : bw = 0,
+			borderStyle : bs,
+			borderColor : bc,
+		} = border || {}
+		const {
+			borderBottomWidth : bbw = bw,
+			borderBottomStyle : bbs = bs,
+			borderBottomColor : bbc= bc,
+		} = borderBottom || {}
+		const {
+			borderTopWidth: btw = bw,
+			borderTopStyle: bts = bs,
+			borderTopColor: btc = bc,
+		} = borderTop || {}
+		const {
+			borderRightWidth: brw = bw,
+			borderRightStyle: brs = bs,
+			borderRightColor: brc = bc,
+		} = borderRight || {}
+		const {
+			borderLeftWidth: blw = bw,
+			borderLeftStyle: bls = bs,
+			borderLeftColor: blc  = bc,
+		} = borderLeft || {}
+		
+		let {
+			borderTopLeftRadius: tl = r || 0,
+			borderTopRightRadius: tr = r || 0,
+			borderBottomRightRadius: br = r || 0,
+			borderBottomLeftRadius: bl = r || 0
+		} = r || {r,r,r,r}
+		if(!borderBottom && !borderLeft && !borderTop && !borderRight && !border) return;
+		const _borderType = (w, s, c) => {
+			// #ifndef APP-NVUE
+			if (s == 'dashed') {
+				// #ifdef MP
+				ctx.setLineDash([Math.ceil(w * 4 / 3), Math.ceil(w * 4 / 3)])
+				// #endif
+				// #ifndef MP
+				ctx.setLineDash([Math.ceil(w * 6), Math.ceil(w * 6)])
+				// #endif
+			} else if (s == 'dotted') {
+				ctx.setLineDash([w, w])
+			}
+			// #endif
+			ctx.setStrokeStyle(c)
+		}
+		const _setBorder = (x1, y1, x2, y2, x3, y3, r1, r2, p1, p2, p3,  bw, bs, bc) => {
+			ctx.save()
+			this.setOpacity(style)
+			this.setTransform(box, style)
+			ctx.setLineWidth(bw)
+			_borderType(bw, bs, bc)
+			ctx.beginPath()
+			ctx.arc(x1, y1, r1, Math.PI * p1, Math.PI * p2)
+			ctx.lineTo(x2, y2)
+			ctx.arc(x3, y3, r2, Math.PI * p2, Math.PI * p3)
+			ctx.stroke()
+			ctx.restore()
+		}
+	
+		if(border) {
+			ctx.save()
+			this.setOpacity(style)
+			this.setTransform(box, style)
+			ctx.setLineWidth(bw)
+			_borderType(bw, bs, bc)
+			this.roundRect(-w/2, -h/2, w, h, r, false, bc ? true : false)
+			ctx.restore()
+		}
+		x = -w/2
+		y = -h/2
+		if(borderBottom) {
+			_setBorder(x + w - br, y + h - br, x + bl, y + h, x + bl, y + h - bl, br, bl, 0.25, 0.5, 0.75, bbw, bbs, bbc)
+		}
+		if(borderLeft) {
+			// 左下角
+			_setBorder(x + bl, y + h - bl, x, y + tl, x + tl, y + tl, bl, tl, 0.75, 1, 1.25, blw, bls, blc)
+		}
+		if(borderTop) {
+			// 左上角
+			_setBorder(x + tl, y + tl, x + w - tr, y, x + w - tr, y + tr, tl, tr, 1.25, 1.5, 1.75, btw, bts, btc)
+		}
+		if(borderRight) {
+			// 右上角
+			_setBorder(x + w - tr, y + tr, x + w, y + h - br, x + w - br, y + h - br, tr, br, 1.75, 2, 0.25, btw, bts, btc)
+		}
+	}
+	setOpacity({opacity = 1}) {
+		this.ctx.setGlobalAlpha(opacity)
+	}
+	drawView(box, style) {
+		const {ctx} = this
+		const {
+			left: x,
+			top: y,
+			width: w,
+			height: h
+		} = box
+		let {
+			borderRadius = 0,
+			border,
+			borderTop,
+			borderBottom,
+			borderLeft,
+			borderRight,
+			color = '#000000',
+			backgroundColor: bg,
+			rotate,
+			shadow
+		} = style || {}
+		ctx.save()
+		this.setOpacity(style)
+		this.setTransform(box, style)
+		this.setShadow(style)
+		this.setBackground(bg, w, h)
+		this.roundRect(-w/2, -h/2, w, h, borderRadius, true, false)
+		ctx.restore()
+		this.setBorder(box, style)
+	}
+	async drawImage(img, box = {}, style = {}, custom = true) {
+		await new Promise(async (resolve, reject) => {
+			const {ctx} = this
+			const canvas = this.canvas
+			const {
+				borderRadius = 0,
+				mode,
+				backgroundColor: bg,
+			} = style
+			let {
+				left: x,
+				top: y,
+				width: w,
+				height: h
+			} = box
+			ctx.save()
+			if(!custom) {
+				this.setOpacity(style)
+				this.setTransform(box, style)
+				this.setBackground(bg, w, h)
+				this.setShadow(style)
+				x = -w/2
+				y = -h/2
+				this.roundRect(x, y, w, h, borderRadius, true, false)
+			}
+			ctx.clip()
+			const _modeImage = (img) => {
+				// 获得图片原始大小
+				let rWidth = img.width
+				let rHeight = img.height
+				let startX = 0
+				let startY = 0
+				// 绘画区域比例
+				const cp = w / h
+				// 原图比例
+				const op = rWidth / rHeight
+				if (cp >= op) {
+					rHeight = rWidth / cp;
+					// startY = Math.round((h - rHeight) / 2)
+				} else {
+					rWidth = rHeight * cp;
+					startX = Math.round(((img.width || w) - rWidth) / 2)
+				}
+				if (mode === 'scaleToFill' || !img.width) {
+					ctx.drawImage(img.src, x, y, w, h);
+				} else {
+					// 百度小程序 开发工具 顺序有问题 暂不知晓真机
+					// #ifdef MP-BAIDU
+					ctx.drawImage(img.src, x, y, w, h, startX, startY, rWidth, rHeight)
+					// #endif
+					// #ifndef MP-BAIDU
+					ctx.drawImage(img.src, startX, startY, rWidth, rHeight, x, y, w, h)
+					// #endif
+				}
+			}
+			const _drawImage = (img) => {
+				if (this.use2dCanvas) {
+					const Image = canvas.createImage()
+					Image.onload = () => {
+						img.src = Image
+						_modeImage(img)
+						_restore()
+					}
+					Image.onerror = () => {
+						console.error(`createImage fail: ${img}`)
+						reject(new Error(`createImage fail: ${img}`))
+					}
+					Image.src = img.src
+				} else {
+					_modeImage(img)
+					_restore()
+				}
+			}
+			const _restore = () => {
+				ctx.restore()
+				this.setBorder(box, style)
+				setTimeout(() => {
+					resolve(true)
+				}, this.root.sleep)
+			}
+			if(typeof img === 'string') {
+				const {path: src, width, height} = await getImageInfo(img, this.isH5PathToBase64)
+				_drawImage({src, width, height})
+			} else {
+				_drawImage(img)
+			}
+		})
+	}
+	drawText(text, box, style, rules) {
+		const {ctx} = this
+		let {
+			left: x,
+			top: y,
+			width: w,
+			height: h,
+			offsetLeft: ol = 0
+		} = box
+		let {
+			color = '#000000',
+			lineHeight = '1.4em',
+			fontSize = 14,
+			fontWeight,
+			fontFamily,
+			textStyle,
+			textAlign = 'left',
+			verticalAlign: va = 'top',
+			backgroundColor: bg,
+			maxLines,
+			textDecoration: td
+		} = style
+		lineHeight = toPx(lineHeight, fontSize)
+		
+		if (!text) return
+		ctx.save()
+		
+		this.setOpacity(style)
+		this.setTransform(box, style)
+		x = -w/2
+		y = -h/2
+		ctx.setTextBaseline(va)
+		this.setFont({fontFamily, fontSize, fontWeight, textStyle})
+		ctx.setTextAlign(textAlign)
+		
+		if(bg) {
+			this.setBackground(bg, w, h)
+			this.roundRect(x, y, w, h, 1, bg)
+		 }
+		this.setShadow(style)
+		ctx.setFillStyle(color)
+		let rulesObj = {};
+		if(rules) {
+			if (rules.word.length > 0) {
+				for (let i = 0; i < rules.word.length; i++) {
+					let startIndex = 0,
+						index;
+					while ((index = text.indexOf(rules.word[i], startIndex)) > -1) {
+						rulesObj[index] = { 
+							reset: true
+						};
+						for (let j = 0; j < rules.word[i].length; j++) {
+							rulesObj[index + j] = { 
+								reset: true
+							};
+						}
+						startIndex = index + 1;
+					}
+				}
+			}
+		}
+		// 水平布局
+		switch (textAlign) {
+			case 'left':
+				break
+			case 'center':
+				x += 0.5 * w
+				break
+			case 'right':
+				x += w
+				break
+			default:
+				break
+		}
+		const textWidth = this.measureText(text, fontSize)
+		const actualHeight = Math.ceil(textWidth / w) * lineHeight
+		let paddingTop = Math.ceil((h - actualHeight) / 2)
+		if (paddingTop < 0) paddingTop = 0
+		// 垂直布局
+		switch (va) {
+			case 'top':
+				break
+			case 'middle':
+				y += fontSize / 2
+				break
+			case 'bottom':
+				y += fontSize 
+				break
+			default:
+				break
+		}
+		
+		// 绘线
+		const _drawLine = (x, y, textWidth) => {
+			const { system } = uni.getSystemInfoSync()
+			if(/win|mac/.test(system)){
+				y += (fontSize / 3)
+			}
+			// 垂直布局
+			switch (va) {
+				case 'top':
+					break
+				case 'middle':
+					y -= fontSize / 2 
+					break
+				case 'bottom':
+					y -= fontSize
+					break
+				default:
+					break
+			}
+			let to = x
+			switch (textAlign) {
+				case 'left':
+					x = x
+					to+= textWidth
+					break
+				case 'center':
+					x = x - textWidth / 2
+					to = x + textWidth
+					break
+				case 'right':
+					to = x
+					x = x - textWidth
+					break
+				default:
+					break
+			}
+			
+			if(td) {
+				ctx.setLineWidth(fontSize / 13);
+				ctx.beginPath();
+				
+				if (/\bunderline\b/.test(td)) {
+					y -= inlinePaddingTop * 0.8
+					ctx.moveTo(x, y);
+					ctx.lineTo(to, y);
+				}
+				
+				if (/\boverline\b/.test(td)) {
+					y += inlinePaddingTop
+					ctx.moveTo(x, y - lineHeight);
+					ctx.lineTo(to, y - lineHeight);
+				}
+				if (/\bline-through\b/.test(td)) {
+					ctx.moveTo(x , y - lineHeight / 2 );
+					ctx.lineTo(to, y - lineHeight /2 );
+				}
+				ctx.closePath();
+				ctx.setStrokeStyle(color);
+				ctx.stroke();
+			}
+		}
+		
+		const _reset = (text, x, y) => {
+			const rs = Object.keys(rulesObj)
+			for (let i = 0; i < rs.length; i++) {
+				const item = rulesObj[rs[i]]
+				// ctx.globalCompositeOperation = "destination-out";
+				ctx.save();
+				ctx.setFillStyle(rules.color);
+				if(item.char) {
+					ctx.fillText(item.char, item.x , item.y)
+				}
+				ctx.restore();
+			}
+		}
+		const _setText = (isReset, char) => {
+			if(isReset) {
+				const t1 = Math.round(this.measureText('\u0020', fontSize))
+				const t2 = Math.round(this.measureText('\u3000', fontSize))
+				const t3 = Math.round(this.measureText(char, fontSize))
+				let _char = ''
+				let _num = 1
+				if(t3 == t2){
+					_char ='\u3000'
+					_num = 1
+				} else {
+					_char = '\u0020'
+					_num = Math.ceil(t3 / t1)
+				}
+				return new Array(_num).fill(_char).join('')
+			} else {
+				return char
+			}
+		}
+		const _setRulesObj = (text, index, x, y) => {
+			rulesObj[index].x = x
+			rulesObj[index].y = y
+			rulesObj[index].char = text
+		}
+		const inlinePaddingTop = Math.ceil((lineHeight - fontSize) / 2)
+		// 不超过一行
+		if (textWidth + ol <= w && !text.includes('\n')) {
+			x = x + ol
+			const rs = Object.keys(rulesObj)
+			let _text = text.split('')
+			if(rs) {
+				for (let i = 0; i < rs.length; i++) {
+					const index = rs[i]
+					const t = _text[index]
+					let char = _setText(rulesObj[index], t) 
+					_text[index] = char
+					_setRulesObj(t, index, x + this.measureText(text.substring(0, index), fontSize), y + inlinePaddingTop)
+				}
+				_reset()
+			}
+			ctx.fillText(_text.join(''), x, y + inlinePaddingTop)
+			y += lineHeight
+			_drawLine(x, y, textWidth)
+			ctx.restore()
+			this.setBorder(box, style)
+			return
+		}
+		// 多行文本
+		const chars = text.split('')
+		const _y = y
+		let _x = x
+		// 逐行绘制
+		let line = ''
+		let lineIndex = 0
+		
+		for(let index = 0 ; index <= chars.length; index++){
+			let ch = chars[index] || ''
+			const isLine = ch === '\n'
+			const isRight = ch == ''// index == chars.length
+			ch = isLine ? '' : ch;
+			
+			let textline = line + _setText(rulesObj[index], ch)
+			let textWidth = this.measureText(textline, fontSize)
+			
+			
+			// 绘制行数大于最大行数，则直接跳出循环
+			if (lineIndex >= maxLines) {
+				break;
+			}
+			if(lineIndex == 0) {
+				textWidth = textWidth + ol
+				_x += ol
+			}
+			if(rulesObj[index]) {
+				_setRulesObj(ch, index, _x + this.measureText(line, fontSize), y + inlinePaddingTop)
+			}
+			if (textWidth > w || isLine || isRight) {
+				lineIndex++
+				line = isRight && textWidth <= w ? textline : line
+				if(lineIndex === maxLines && textWidth > w) {
+					while( this.measureText(`${line}...`, fontSize) > w) {
+						if (line.length <= 1) {
+							// 如果只有一个字符时，直接跳出循环
+							break;
+						}
+						line = line.substring(0, line.length - 1);
+						if(rulesObj[index - 1]) {
+							rulesObj[index - 1].char = ''
+						}
+					}
+					line += '...'
+				}
+				ctx.fillText(line, _x, y + inlinePaddingTop)
+				y += lineHeight
+				_drawLine(_x, y, textWidth)
+				line = ch
+				if ((y + lineHeight) > (_y + h)) break
+			} else {
+				line = textline
+			}
+		}
+		const rs = Object.keys(rulesObj)
+		if(rs) {
+			_reset()
+		}
+		ctx.restore()
+		this.setBorder(box, style)
+	}
+	async findNode(element, parent = {}, index = 0, siblings = [], source) {
+		let computedStyle = Object.assign({}, this.getComputedStyle(element, parent, index));
+		let attributes = await this.getAttributes(element)
+		let node = {
+			id: id++,
+			parent,
+			computedStyle,
+			rules: element.rules,
+			attributes: Object.assign({}, attributes),
+			name: element?.type || 'view',
+		}
+		if(JSON.stringify(parent) === '{}' && !element.type) {
+			const {left = 0, top = 0, width = 0, height = 0 } = computedStyle
+			node.layoutBox = {left, top, width, height }
+		} else {
+			node.layoutBox = Object.assign({left: 0, top: 0}, this.getLayoutBox(node, parent, index, siblings, source))
+		}
+		
+		if (element?.views) {
+			let childrens = []
+			node.children = []
+			for (let i = 0; i < element.views.length; i++) {
+				let v = element.views[i]
+				childrens.push(await this.findNode(v, node, i, childrens, element))
+			}
+			 node.children = childrens
+		}
+		return node
+	}
+	getComputedStyle(element, parent = {}, index = 0) {
+		const style = {}
+		const node = JSON.stringify(parent) == '{}' && !element.type ? element :  element.css;
+		if(parent.computedStyle) {
+			for (let value of Object.keys(parent.computedStyle)){
+				const item = parent.computedStyle[value]
+				if(['color', 'fontSize', 'lineHeight', 'verticalAlign', 'fontWeight', 'textAlign'].includes(value)) {
+					style[value] = /em|px$/.test(item) ? toPx(item, node?.fontSize) : item
+				}
+			}
+		}
+		if(!node) return style
+		for (let value of Object.keys(node)) {
+			const item = node[value]
+			if(value == 'views') {
+				continue
+			}
+			if (['boxShadow', 'shadow'].includes(value)) {
+				let shadows = item.split(' ').map(v => /^\d/.test(v) ? toPx(v) : v)
+				style.boxShadow = shadows
+				continue
+			}
+			if (value.includes('border') && !value.includes('adius')) {
+				const prefix = value.match(/^border([BTRLa-z]+)?/)[0]
+				const type = value.match(/[W|S|C][a-z]+/)
+				let v = item.split(' ').map(v => /^\d/.test(v) ? toPx(v) : v)
+				
+				if(v.length > 1) {
+					style[prefix] = {
+						[prefix + 'Width'] : v[0] || 1,
+						[prefix + 'Style'] : v[1] || 'solid',
+						[prefix + 'Color'] : v[2] || 'black'
+					}
+				} else {
+					style[prefix] = {
+						[prefix + 'Width'] :  1,
+						[prefix + 'Style'] : 'solid',
+						[prefix + 'Color'] : 'black'
+					}
+					style[prefix][prefix + type[0]] = v[0]
+				}
+				continue
+			}
+			if (['background', 'backgroundColor'].includes(value)) {
+				style['backgroundColor'] = item
+				continue
+			}
+			if(value.includes('padding') || value.includes('margin') || value.includes('adius')) {
+				let isRadius = value.includes('adius')
+				let prefix = isRadius ? 'borderRadius' : value.match(/[a-z]+/)[0]
+				let pre = [0,0,0,0].map((item, i) => isRadius ? ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'][i] : [prefix + 'Top', prefix + 'Right', prefix + 'Bottom', prefix + 'Left'][i] )
+				if(value === 'padding' || value === 'margin' || value === 'radius' || value === 'borderRadius') {
+					let v = item?.split(' ').map((item) => /^\d/.test(item) && toPx(item, node['width']), []) ||[0];
+					let type = isRadius ? 'borderRadius' : value;
+					if(v.length == 1) {
+						style[type] = v[0]
+					} else {
+						let [t, r, b, l] = v
+						style[type] = {
+							[pre[0]]: t,
+							[pre[1]]: isNumber(r) ? r : t,
+							[pre[2]]: isNumber(b) ? b : t,
+							[pre[3]]: isNumber(l) ? l : r
+						}
+					}
+				} else {
+					if(typeof style[prefix] === 'object') {
+						style[prefix][value] = toPx(item, node['width'])
+					} else {
+						style[prefix] = {
+							[pre[0]]: style[prefix] || 0,
+							[pre[1]]: style[prefix] || 0,
+							[pre[2]]: style[prefix] || 0,
+							[pre[3]]: style[prefix] || 0
+						}
+						style[prefix][value] = toPx(item, node['width'])
+					}
+				}
+				continue
+			}
+			if(value.includes('width') || value.includes('height')) {
+				if(/%$/.test(item)) {
+					style[value] = toPx(item, parent.layoutBox[value])
+				} else {
+					style[value] = /px|rpx$/.test(item) ? toPx(item) : item
+				}
+				continue
+			}
+			if(value.includes('transform')) {
+				style[value]= {}
+				item.replace(/([a-zA-Z]+)\(([0-9,-\.%rpxdeg\s]+)\)/g, (g1, g2, g3) => {
+					const v = g3.split(',').map(k => k.replace(/(^\s*)|(\s*$)/g,''))
+					const transform = (v, r) => {
+						return v.includes('deg') ? v * 1 : toPx(v, r)
+					}
+					if(g2.includes('matrix')) {
+						style[value][g2] = v.map(v => v * 1)
+					} else if(g2.includes('rotate')) {
+						style[value][g2] = g3.match(/\d+/)[0] * 1
+					}else if(/[X, Y]/.test(g2)) {
+						style[value][g2] = /[X]/.test(g2) ? transform(v[0], node['width']) : transform(v[0], node['height'])
+					} else {
+						style[value][g2+'X'] = transform(v[0], node['width'])
+						style[value][g2+'Y'] = transform(v[1] || v[0], node['height'])
+					}
+				})
+				continue
+			}
+			if(/em$/.test(item) && !value.includes('lineHeight')) {
+				style[value] =  Math.ceil(parseFloat(item.replace('em')) * toPx(node['fontSize'] || 14))
+			} else {
+				style[value] = /%|px|rpx$/.test(item) ? toPx(item, node['width']) : item
+			}
+		}
+		if((element.name == 'image' || element.type == 'image') && !style.mode) {
+			style.mode = 'aspectFill'
+			if((!node.width || node.width == 'auto') && (!node.height || node.width == 'auto') ) {
+				style.mode = ''
+			} 
+		}
+		return style
+	}
+	getLayoutBox(element, parent = {}, index = 0, siblings = [], source = {}) {
+		let box = {}
+		let {name, computedStyle: cstyle, layoutBox, attributes} = element || {}
+		if(!name) return box
+		const {ctx} = this
+		const pbox = parent.layoutBox || this.root
+		const pstyle = parent.computedStyle
+		let { 
+			verticalAlign: v, 
+			left: x, 
+			top: y,
+			width: w,
+			height: h,
+			fontSize = 14,
+			lineHeight = '1.4em',
+			maxLines,
+			fontWeight,
+			fontFamily,
+			textStyle,
+			position,
+			display
+			}  = cstyle;
+		
+		const { paddingTop: pt = 0, paddingRight: pr = 0, paddingBottom: pb = 0, paddingLeft: pl = 0, } = cstyle.padding || {}
+		const { marginTop: mt = 0, marginRight: mr = 0, marginBottom: mb = 0, marginLeft: ml = 0, } = cstyle.margin || {}
+		
+		if(position == 'relative') {
+			x += pbox.left
+			y += pbox.top
+		}
+		if(name === 'text') {
+			const text = attributes.text ||''
+			lineHeight = toPx(lineHeight, fontSize)
+			ctx.save()
+			this.setFont({fontFamily, fontSize, fontWeight, textStyle})
+			const {layoutBox: lbox, computedStyle: ls} = siblings[index - 1] || {}
+			const {layoutBox: rbox, computedStyle: rs} = siblings[index + 1] || {}
+			const isLeft = index == 0
+			const isblock = display === 'block' || ls?.display === 'block'
+			const isOnly = isLeft && !rbox || !parent?.id
+			const lboxR = isLeft || isblock ? 0 : lbox.offsetRight || 0
+			let texts = text.split('\n')
+			let lineIndex = 1
+			let line = ''
+			const textIndent = cstyle.textIndent || 0
+			if(!isOnly) {
+				texts.map((t, i) => {
+					lineIndex += i
+					const chars = t.split('')
+					for (let j = 0; j < chars.length; j++) {
+						let ch = chars[j]
+						let textline = line + ch
+						let textWidth = this.measureText(textline, fontSize)
+						if(lineIndex == 1) {
+							textWidth = textWidth + (isblock ? 0 : lboxR) +  textIndent
+						}
+						if(textWidth > pbox.width) {
+							lineIndex++
+							line = ch
+						} else {
+							line = textline
+						}
+					}
+				})
+			} else {
+				line = text
+				lineIndex = Math.max(texts.length, Math.ceil(this.measureText(text, fontSize) / ((w || pbox.width) - this.measureText('0', fontSize))))
+			}
+			box.offsetLeft = (isNumber(x) || isblock || isOnly ? textIndent : lboxR) +  pl + ml;
+			// 剩下的字宽度
+			const remain = (this.measureText(line, fontSize))
+			let width =  lineIndex > 1 ? pbox.width : remain + box.offsetLeft;
+			box.offsetRight = box.offsetLeft + (w ? w : (isblock ? pbox.width : remain)) + pr + mr;
+			
+			
+			const _getLeft = () => {
+				return (x || pbox.left)
+			}
+			const _getWidth = () => {
+				return w || (isOnly ? pbox.width : (width > pbox.width - box.left || lineIndex > 1 ?  pbox.width - box.left : width))
+			}
+			const _getHeight = () => {
+				if(h) {
+					return h
+				} else if(lineIndex > 1 ) {
+					return (maxLines || lineIndex) * lineHeight + pt + pb + mt + mb
+				} else {
+					return lineHeight + pt + pb + mt + mb
+				}
+			}
+			const _getTop = () => {
+				let _y = y
+				if(_y) {
+					return _y + pt + mt
+				}
+				if(isLeft) {
+					_y = pbox.top
+				} else if(lbox.width < pbox.width) {
+					_y = lbox.top
+				} else {
+					_y = lbox.top + lbox.height - (ls?.lineHeight || 0)
+				}
+				return _y + pt + mt + (isblock && ls?.lineHeight || 0 )
+			}
+			box.left = _getLeft() 
+			box.width = _getWidth() 
+			box.height = _getHeight()
+			box.top = _getTop()
+			ctx.restore()
+		} else if(['view', 'qrcode'].includes(name)) {
+			box.left = x || pbox.left
+			box.width = (w || pbox?.width) - pl - pr
+			box.height = h || 0
+			box.top = y || pbox.top
+		} else if(name === 'image') {
+			box.left = x || pbox.left
+			box.width = (w || pbox?.width) - pl - pr
+			const {
+				width: rWidth,
+				height: rHeight
+			} = attributes
+			box.height = h || box.width * rHeight / rWidth 
+			box.top = y || pbox.top
+		}
+		return box
+	}
+	async getAttributes(element) {
+		let arr = { }
+		if(element?.url || element?.src) {
+			arr.src = element.url || element?.src;
+			const {width = 0, height = 0, path: src} = await getImageInfo(arr.src, this.isH5PathToBase64) || {}
+			arr = Object.assign({}, arr, {width, height, src})
+		}
+		if(element?.text) {
+			arr.text = element.text
+		}
+		return arr
+	}
+	async drawBoard(element) {
+		const node = await this.findNode(element)
+		return this.drawNode(node)
+	}
+	async drawNode(element) {
+		const {
+			layoutBox,
+			computedStyle,
+			name,
+			rules
+		} = element
+		const {
+			src,
+			text
+		} = element.attributes
+		if (name === 'view') {
+			this.drawView(layoutBox, computedStyle)
+		} else if (name === 'image' && src) {
+			await this.drawImage(element.attributes, layoutBox, computedStyle, false)
+		} else if (name === 'text') {
+			this.drawText(text, layoutBox, computedStyle, rules)
+		} else if (name === 'qrcode') {
+			QR.api.draw(text, this, layoutBox, computedStyle)
+		}
+		if (!element.children) return
+		const childs = Object.values ? Object.values(element.children) : Object.keys(element.children).map((key) => element.children[key]);
+		for (const child of childs) {
+			await this.drawNode(child)
+		}
+	}
+}

components/lime-painter/gradient.js

@@ -0,0 +1,107 @@
+/* eslint-disable */
+
+export const GD = {
+	isGradient(bg) {
+		if (bg && (bg.startsWith('linear') || bg.startsWith('radial'))) {
+			return true;
+		}
+		return false;
+	},
+	doGradient(bg, width, height, ctx) {
+		if (bg.startsWith('linear')) {
+			linearEffect(width, height, bg, ctx);
+		} else if (bg.startsWith('radial')) {
+			radialEffect(width, height, bg, ctx);
+		}
+	},
+}
+
+function analizeGrad(string) {
+	const colorPercents = string.substring(0, string.length - 1).split("%,");
+	const colors = [];
+	const percents = [];
+	for (let colorPercent of colorPercents) {
+		colors.push(colorPercent.substring(0, colorPercent.lastIndexOf(" ")).trim());
+		percents.push(colorPercent.substring(colorPercent.lastIndexOf(" "), colorPercent.length) / 100);
+	}
+	return {
+		colors: colors,
+		percents: percents
+	};
+}
+
+function radialEffect(width, height, bg, ctx) {
+	const colorPer = analizeGrad(bg.match(/radial-gradient\((.+)\)/)[1]);
+	const grd = ctx.createCircularGradient(0, 0, width < height ? height / 2 : width / 2);
+	for (let i = 0; i < colorPer.colors.length; i++) {
+		grd.addColorStop(colorPer.percents[i], colorPer.colors[i]);
+	}
+	ctx.setFillStyle(grd);
+}
+
+function analizeLinear(bg, width, height) {
+	const direction = bg.match(/([-]?\d{1,3})deg/);
+	const dir = direction && direction[1] ? parseFloat(direction[1]) : 0;
+	let coordinate;
+	switch (dir) {
+		case 0:
+			coordinate = [0, -height / 2, 0, height / 2];
+			break;
+		case 90:
+			coordinate = [width / 2, 0, -width / 2, 0];
+			break;
+		case -90:
+			coordinate = [-width / 2, 0, width / 2, 0];
+			break;
+		case 180:
+			coordinate = [0, height / 2, 0, -height / 2];
+			break;
+		case -180:
+			coordinate = [0, -height / 2, 0, height / 2];
+			break;
+		default:
+			let x1 = 0;
+			let y1 = 0;
+			let x2 = 0;
+			let y2 = 0;
+			if (direction[1] > 0 && direction[1] < 90) {
+				x1 = (width / 2) - ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (
+					90 - direction[1]) * Math.PI * 2 / 360) / 2;
+				y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
+				x2 = -x1;
+				y1 = -y2;
+			} else if (direction[1] > -180 && direction[1] < -90) {
+				x1 = -(width / 2) + ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (
+					90 - direction[1]) * Math.PI * 2 / 360) / 2;
+				y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
+				x2 = -x1;
+				y1 = -y2;
+			} else if (direction[1] > 90 && direction[1] < 180) {
+				x1 = (width / 2) + (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (
+					90 - direction[1]) * Math.PI * 2 / 360) / 2;
+				y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
+				x2 = -x1;
+				y1 = -y2;
+			} else {
+				x1 = -(width / 2) - (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 *
+					(90 - direction[1]) * Math.PI * 2 / 360) / 2;
+				y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
+				x2 = -x1;
+				y1 = -y2;
+			}
+			coordinate = [x1, y1, x2, y2];
+			break;
+	}
+	return coordinate;
+}
+
+function linearEffect(width, height, bg, ctx) {
+	const param = analizeLinear(bg, width, height);
+	const grd = ctx.createLinearGradient(param[0], param[1], param[2], param[3]);
+	const content = bg.match(/linear-gradient\((.+)\)/)[1];
+	const colorPer = analizeGrad(content.substring(content.indexOf(',') + 1));
+	for (let i = 0; i < colorPer.colors.length; i++) {
+		grd.addColorStop(colorPer.percents[i], colorPer.colors[i]);
+	}
+	ctx.setFillStyle(grd);
+}

components/lime-painter/index.vue

@@ -0,0 +1,252 @@
+<template>
+	<canvas v-if="use2dCanvas" :id="canvasId" type="2d" :style="style"></canvas>
+	<canvas v-else :canvas-id="canvasId" :style="style" :id="canvasId" :width="boardWidth * dpr" :height="boardHeight * dpr"></canvas>
+</template>
+
+<script>
+import { toPx, base64ToPath, compareVersion} from './utils';
+import { Draw } from './draw';
+import { adaptor } from './canvas';
+export default {
+	// version: '1.5.9.2',
+	name: 'l-painter',
+	props: {
+		board: Object,
+		fileType: {
+			type: String,
+			default: 'png'
+		},
+		width: [Number, String],
+		height: [Number, String],
+		pixelRatio: Number,
+		customStyle: String,
+		isRenderImage: Boolean,
+		isBase64ToPath: Boolean,
+		isH5PathToBase64: Boolean,
+		sleep: {
+			type: Number,
+			default: 1000/30
+		},
+		type: {
+			type: String,
+			default: '2d',
+		}
+	},
+	data() {
+		return {
+			// #ifndef MP-WEIXIN || MP-QQ 
+			canvasId: `l-painter_${this._uid}`,
+			// #endif
+			// #ifdef MP-WEIXIN || MP-QQ 
+			canvasId: `l-painter`,
+			// #endif
+			// #ifdef MP-WEIXIN
+			use2dCanvas: true,
+			// #endif
+			// #ifndef MP-WEIXIN
+			use2dCanvas: false,
+			// #endif
+			draw: null,
+			ctx: null
+		};
+	},
+	computed: {
+		newboard() {
+			return this.board && JSON.parse(JSON.stringify(this.board))
+		},
+		style() {
+			return `width:${this.boardWidth}px; height: ${this.boardHeight}px; ${this.customStyle}`;
+		},
+		dpr() {
+			return this.pixelRatio || uni.getSystemInfoSync().pixelRatio;
+		},
+		boardWidth() {
+			const { width = 200 } = this.board || {};
+			return toPx(this.width || width);
+		},
+		boardHeight() {
+			const { height = 200 } = this.board || {};
+			return toPx(this.height || height);
+		}
+	},
+	mounted() {
+		// #ifdef MP-WEIXIN
+		const {SDKVersion} = wx.getSystemInfoSync()
+		this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0;
+		// #endif
+		this.$watch('newboard', async (val, old) => {
+			if (JSON.stringify(val) === '{}' || !val) return;
+			const {width: w, height: h} = val || {};
+			const {width: ow, height: oh} = old || {};
+			if(w !== ow || h !== oh) {
+				this.inited = false;
+			}
+			this.render();
+		}, {
+			deep: true, 
+			immediate: true,
+			})
+	},
+	methods: {
+		async render(args = {}, single = false) {
+			const ctx = await this.getContext()
+			const { use2dCanvas, boardWidth, boardHeight, board, canvas, isBase64ToPath, isH5PathToBase64, sleep } = this;
+			if (use2dCanvas && !canvas) {
+				return Promise.reject(new Error('render: fail canvas has not been created'));
+			}
+			if(!this.boundary) {
+				this.boundary = {
+				  top: 0,
+				  left: 0,
+				  width: boardWidth,
+				  height: boardHeight,
+				  sleep
+				}
+			}
+			if(!single) {
+				ctx.clearRect(0, 0, boardWidth, boardHeight);
+			}
+			if(!this.draw) {
+				this.draw = new Draw(ctx, canvas, use2dCanvas, isH5PathToBase64, this.boundary);
+			} 
+			if(JSON.stringify(args) != '{}' || board && JSON.stringify(board) != '{}') {
+				await this.draw.drawBoard(JSON.stringify(args) != '{}' ? args : board);
+			}
+			await new Promise(resolve => this.$nextTick(resolve)) 
+			if (!use2dCanvas && !single) {
+				await this.canvasDraw(ctx);
+			}
+			this.$emit('done')
+			if(this.isRenderImage && !single) {
+				this.canvasToTempFilePath()
+				.then(async res => {
+					if(/^data:image\/(\w+);base64/.test(res.tempFilePath) && isBase64ToPath) {
+						const img = await base64ToPath(res.tempFilePath)
+						this.$emit('success', img)
+					} else {
+						this.$emit('success', res.tempFilePath)
+					}
+				})
+				.catch(err => {
+					this.$emit('fail', err)
+					new Error(JSON.stringify(err))
+					console.error(JSON.stringify(err))
+				})
+			}
+			return Promise.resolve({ctx, draw: this.draw});
+		},
+		async custom(cb) {
+			const {ctx, draw} = await this.render({}, true)
+			ctx.save()
+			await cb(ctx, draw)
+			ctx.restore()
+			return Promise.resolve(true);
+		},
+		async single(args = {}) {
+			await this.render(args, true)
+			return Promise.resolve(true);
+		},
+		canvasDraw(flag = false) {
+			const {ctx} = this
+			return new Promise(resolve => {
+				ctx.draw(flag, () => {
+					resolve(true);
+				});
+			});
+		},
+		async getContext() {
+			if(this.ctx && this.inited) {
+				return Promise.resolve(this.ctx)
+			};
+			const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
+			const _getContext = () => {
+				return new Promise(resolve => {
+				uni.createSelectorQuery()
+					.in(this)
+					.select('#' + this.canvasId)
+					.boundingClientRect()
+					.exec(res => {
+						if(res) {
+							const ctx = uni.createCanvasContext(this.canvasId, this);
+							if (!this.inited) {
+								this.inited = true;
+								this.use2dCanvas = false;
+								this.canvas = res
+							}
+							// #ifdef MP-ALIPAY
+							ctx.scale(dpr, dpr);
+							// #endif
+							this.ctx = ctx
+							resolve(ctx);
+						}
+					})
+				})
+			}
+			// #ifndef MP-WEIXIN 
+			return _getContext()
+			// #endif
+			
+			if(!use2dCanvas) {
+				return _getContext()
+			}
+			return new Promise(resolve => {
+				uni.createSelectorQuery()
+					.in(this)
+					.select('#l-painter')
+					.node()
+					.exec(res => {
+						const canvas = res[0].node;
+						if(!canvas) {
+							this.use2dCanvas = false;
+							return this.getContext()
+						}
+						const ctx = canvas.getContext(type);
+						if (!this.inited) {
+							this.inited = true;
+							canvas.width = boardWidth * dpr;
+							canvas.height = boardHeight * dpr;
+							this.use2dCanvas = true;
+							this.canvas = canvas
+							ctx.scale(dpr, dpr);
+						}
+						this.ctx = adaptor(ctx)
+						resolve(adaptor(ctx));
+					});
+				
+			});
+		},
+		canvasToTempFilePath(args = {}) {
+		  const {use2dCanvas, canvasId} = this
+		  return new Promise((resolve, reject) => {
+		    let { top = 0, left = 0, width, height } = this.boundary || this
+			let destWidth = width * this.dpr
+			let destHeight = height * this.dpr
+			// #ifdef MP-ALIPAY
+			width = width * this.dpr
+			height = height * this.dpr
+			// #endif
+		    const copyArgs = {
+		      x: left,
+		      y: top,
+		      width,
+		      height,
+		      destWidth,
+		      destHeight,
+		      canvasId,
+		      fileType: args.fileType || this.fileType,
+		      quality: args.quality || 1,
+		      success: resolve,
+		      fail: reject
+		    }
+		    if (use2dCanvas) {
+		      delete copyArgs.canvasId
+		      copyArgs.canvas = this.canvas
+		    }
+		    uni.canvasToTempFilePath(copyArgs, this)
+		  })
+		}
+	}
+};
+</script>
+
+<style></style>

components/lime-painter/qrcode.js

@@ -0,0 +1 @@
+// 请去下载覆盖：https://gitee.com/liangei/lime-painter/blob/master/qrcode.js

components/lime-painter/utils.js

@@ -0,0 +1,409 @@
+const screen = uni.getSystemInfoSync().windowWidth / 750;
+// 缓存图片
+let cache = {}
+export function isNumber(value) {
+	return /^-?\d+(\.\d+)?$/.test(value);
+}
+export function toPx(value, baseSize) {
+	// 如果是数字
+	if (typeof value === 'number') {
+		return value
+	}
+	// 如果是字符串数字
+	if (isNumber(value)) {
+		return value * 1
+	}
+	// 如果有单位
+	if (typeof value === 'string') {
+		const reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+		const results = reg.exec(value);
+		if (!value || !results) {
+			return 0;
+		}
+		const unit = results[2];
+		value = parseFloat(value);
+		let res = 0;
+		if (unit === 'rpx') {
+			res = Math.floor(value * (screen || 0.5) * 1);
+		} else if (unit === 'px') {
+			res = Math.floor(value * 1);
+		} else if (unit === '%') {
+			res = Math.floor(value * toPx(baseSize) / 100);
+		} else if (unit === 'em') {
+			res = Math.ceil(value * toPx(baseSize || 14));
+		}
+		return res;
+	}
+}
+
+// 计算版本
+export function compareVersion(v1, v2) {
+  v1 = v1.split('.')
+  v2 = v2.split('.')
+  const len = Math.max(v1.length, v2.length)
+  while (v1.length < len) {
+    v1.push('0')
+  }
+  while (v2.length < len) {
+    v2.push('0')
+  }
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i], 10)
+    const num2 = parseInt(v2[i], 10)
+
+    if (num1 > num2) {
+      return 1
+    } else if (num1 < num2) {
+      return -1
+    }
+  }
+  return 0
+}
+
+/** 从 0x20 开始到 0x80 的字符宽度数据 */
+export const CHAR_WIDTH_SCALE_MAP = [0.296, 0.313, 0.436, 0.638, 0.586, 0.89, 0.87, 0.256, 0.334, 0.334, 0.455, 0.742,
+	0.241, 0.433, 0.241, 0.427, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.241, 0.241, 0.742,
+	0.742, 0.742, 0.483, 1.031, 0.704, 0.627, 0.669, 0.762, 0.55, 0.531, 0.744, 0.773, 0.294, 0.396, 0.635, 0.513, 0.977,
+	0.813, 0.815, 0.612, 0.815, 0.653, 0.577, 0.573, 0.747, 0.676, 1.018, 0.645, 0.604, 0.62, 0.334, 0.416, 0.334, 0.742,
+	0.448, 0.295, 0.553, 0.639, 0.501, 0.64, 0.567, 0.347, 0.64, 0.616, 0.266, 0.267, 0.544, 0.266, 0.937, 0.616, 0.636,
+	0.639, 0.64, 0.382, 0.463, 0.373, 0.616, 0.525, 0.79, 0.507, 0.529, 0.492, 0.334, 0.269, 0.334, 0.742, 0.296
+];
+// #ifdef MP
+const prefix = () => {
+	// #ifdef MP-TOUTIAO
+	return tt
+	// #endif
+	// #ifdef MP-WEIXIN
+	return wx
+	// #endif
+	// #ifdef MP-BAIDU
+	return swan
+	// #endif
+	// #ifdef MP-ALIPAY
+	return my
+	// #endif
+	// #ifdef MP-QQ
+	return qq
+	// #endif
+	// #ifdef MP-360
+	return qh
+	// #endif
+}
+
+const base64ToArrayBuffer = (data) => {
+	/**
+	 * base64ToArrayBuffer
+	 * Base64Binary.decode(base64_string);  
+	 * Base64Binary.decodeArrayBuffer(base64_string); 
+	 */
+	const Base64Binary = {
+	  _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+	  
+	  /* will return a  Uint8Array type */
+	  decodeArrayBuffer(input) {
+	    const bytes = (input.length/4) * 3;
+	    const ab = new ArrayBuffer(bytes);
+	    this.decode(input, ab);
+	    return ab;
+	  },
+	 
+	  removePaddingChars(input) {
+	    const lkey = this._keyStr.indexOf(input.charAt(input.length - 1));
+	    if(lkey == 64){
+	      return input.substring(0,input.length - 1);
+	    }
+	    return input;
+	  },
+	 
+	  decode(input, arrayBuffer) {
+	    //get last chars to see if are valid
+	    input = this.removePaddingChars(input);
+	    input = this.removePaddingChars(input);
+	 
+	    const bytes = parseInt((input.length / 4) * 3, 10);
+	    
+	    let uarray;
+	    let chr1, chr2, chr3;
+	    let enc1, enc2, enc3, enc4;
+	    let i = 0;
+	    let j = 0;
+	    
+	    if (arrayBuffer)
+	      uarray = new Uint8Array(arrayBuffer);
+	    else
+	      uarray = new Uint8Array(bytes);
+	    
+	    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+	    
+	    for (i=0; i<bytes; i+=3) {  
+	      //get the 3 octects in 4 ascii chars
+	      enc1 = this._keyStr.indexOf(input.charAt(j++));
+	      enc2 = this._keyStr.indexOf(input.charAt(j++));
+	      enc3 = this._keyStr.indexOf(input.charAt(j++));
+	      enc4 = this._keyStr.indexOf(input.charAt(j++));
+	  
+	      chr1 = (enc1 << 2) | (enc2 >> 4);
+	      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+	      chr3 = ((enc3 & 3) << 6) | enc4;
+	  
+	      uarray[i] = chr1;      
+	      if (enc3 != 64) uarray[i+1] = chr2;
+	      if (enc4 != 64) uarray[i+2] = chr3;
+	    }
+	    return uarray;  
+	  }
+	 }
+	return (uni.base64ToArrayBuffer && uni.base64ToArrayBuffer(data)) || Base64Binary.decodeArrayBuffer(data)
+}
+// #endif
+
+/**
+ * base64转路径
+ * @param {Object} base64
+ */
+export function base64ToPath(base64) {
+	const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
+	
+	return new Promise((resolve, reject) => {
+		// #ifdef MP
+		const fs = uni.getFileSystemManager()
+		
+		//自定义文件名
+		if (!format) {
+			console.error('ERROR_BASE64SRC_PARSE')
+			reject(new Error('ERROR_BASE64SRC_PARSE'))
+		}
+		const time = new Date().getTime();
+		let pre = prefix()
+		const filePath = `${pre.env.USER_DATA_PATH}/${time}.${format}`
+		let buffer = base64ToArrayBuffer(bodyData)
+		fs.writeFile({
+			filePath,
+			data: buffer,
+			encoding: 'binary',
+			success() {
+				resolve(filePath)
+			},
+			fail(err) {
+				console.error('获取base64图片失败', JSON.stringify(err))
+				reject(err)
+			}
+		})
+		// #endif
+		
+		// #ifdef H5
+		// mime类型
+		let mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; 
+		//base64 解码
+		let byteString = atob(base64.split(',')[1]); 
+		//创建缓冲数组
+		let arrayBuffer = new ArrayBuffer(byteString.length);
+		//创建视图
+		let intArray = new Uint8Array(arrayBuffer); 
+		for (let i = 0; i < byteString.length; i++) {
+			intArray[i] = byteString.charCodeAt(i);
+		}
+		resolve(URL.createObjectURL(new Blob([intArray], { type: mimeString })))
+		// #endif
+		
+		// #ifdef APP-PLUS
+		const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
+		bitmap.loadBase64Data(base64, () => {
+			if (!format) {
+				console.error('ERROR_BASE64SRC_PARSE')
+				reject(new Error('ERROR_BASE64SRC_PARSE'))
+			}
+			const time = new Date().getTime();
+			const filePath = `_doc/uniapp_temp/${time}.${format}`
+			
+			bitmap.save(filePath, {}, 
+				() => {
+					bitmap.clear()
+					resolve(filePath)
+				}, 
+				(error) => {
+					bitmap.clear()
+					console.error(`${JSON.stringify(error)}`)
+					reject(error)
+				})
+		}, (error) => {
+			bitmap.clear()
+			console.error(`${JSON.stringify(error)}`)
+			reject(error)
+		})
+		// #endif
+	})
+}
+
+/**
+ * 路径转base64
+ * @param {Object} string
+ */
+
+export function pathToBase64(path) {
+	return new Promise((resolve, reject) => {
+		// #ifdef H5
+		const _canvas = ()=> {
+			let image = new Image();
+			image.onload = function() {
+				let canvas = document.createElement('canvas');
+				// 获取图片原始宽高
+				canvas.width = this.naturalWidth;
+				canvas.height = this.naturalHeight;
+				// 将图片插入画布并开始绘制
+				canvas.getContext('2d').drawImage(image, 0, 0);
+				let result = canvas.toDataURL('image/png')
+				resolve(result);
+				canvas.height = canvas.width = 0
+			}
+			image.src = path
+			image.setAttribute("crossOrigin",'Anonymous');
+			image.src = path;
+			image.onerror = (error) => {
+				console.error(`urlToBase64 error: ${path}`, JSON.stringify(error))
+			    reject(new Error('urlToBase64 error'));
+			};
+		}
+		const _fileReader = (blob) => {
+			const fileReader = new FileReader();
+			fileReader.onload = (e) => {
+			    resolve(e.target.result);
+			};
+			fileReader.readAsDataURL(blob);
+			fileReader.onerror = (error) => {
+				console.error('blobToBase64 error:', JSON.stringify(error))
+			    reject(new Error('blobToBase64 error'));
+			};
+		}
+		const isFileReader = typeof FileReader === 'function'
+		if(/^(http|\/\/)/.test(path) && isFileReader ) {
+			window.URL = window.URL || window.webkitURL;
+			const xhr = new XMLHttpRequest();
+			xhr.open("get", path, true);
+			xhr.timeout = 2000;
+			xhr.responseType = "blob";
+			xhr.onload = function() {
+				if(this.status == 200) {
+					_fileReader(this.response)
+				} else {
+					_canvas()
+				}
+			}
+			xhr.onreadystatechange = function() {
+				if(this.status === 0) {
+					_canvas()
+				}
+			}
+			xhr.send();
+		} else if(/^blob/.test(path) && isFileReader){
+			_fileReader(path)
+		} else {
+			_canvas()
+		}
+		// #endif
+		
+		// #ifdef MP
+		if(uni.canIUse('getFileSystemManager')) {
+			uni.getFileSystemManager().readFile({
+			    filePath: path,
+			    encoding: 'base64',
+			    success: (res) => {
+			        resolve('data:image/png;base64,' + res.data)
+			    },
+			    fail: (error) => {
+					console.error('urlToBase64 error:', JSON.stringify(error))
+			        reject(error)
+			    }
+			})
+		}
+		// #endif
+		
+		// #ifdef APP-PLUS
+		plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), (entry) => {
+		    entry.file((file) => {
+		        const fileReader = new plus.io.FileReader()
+		        fileReader.onload = (data) => {
+		            resolve(data.target.result)
+		        }
+		        fileReader.onerror = (error) => {
+					console.error('pathToBase64 error:', JSON.stringify(error))
+		            reject(error)
+		        }
+		        fileReader.readAsDataURL(file)
+		    }, (error) => {
+				console.error('pathToBase64 error:', JSON.stringify(error))
+		        reject(error)
+		    })
+		}, (error) => {
+			console.error('pathToBase64 error:', JSON.stringify(error))
+		    reject(error)
+		})
+		// #endif
+	})
+}
+
+// #ifdef APP-PLUS
+const getLocalFilePath = (path)=> {
+    if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
+        return path
+    }
+    if (path.indexOf('file://') === 0) {
+        return path
+    }
+    if (path.indexOf('/storage/emulated/0/') === 0) {
+        return path
+    }
+    if (path.indexOf('/') === 0) {
+        const localFilePath = plus.io.convertAbsoluteFileSystem(path)
+        if (localFilePath !== path) {
+            return localFilePath
+        } else {
+            path = path.substr(1)
+        }
+    }
+    return '_www/' + path
+}
+// #endif
+
+export function getImageInfo(img, isH5PathToBase64) {
+		return new Promise(async (resolve, reject) => {
+			const base64Reg = /^data:image\/(\w+);base64/
+			const localReg = /^\.|^\/(?=[^\/])/;
+			const networkReg = /^(http|\/\/)/
+			// #ifdef H5
+			if(networkReg.test(img) && isH5PathToBase64) {
+				img = await pathToBase64(img)
+			}
+			// #endif
+			// #ifndef MP-ALIPAY 
+			if(base64Reg.test(img)) {
+				if(!cache[img]) {
+					const imgName = img
+					img = await base64ToPath(img)
+					cache[imgName] = img
+				} else {
+					img = cache[img]
+				}
+			}
+			// #endif
+			if(cache[img] && cache[img].errMsg) {
+				resolve(cache[img])
+			} else {
+				uni.getImageInfo({
+					src: img,
+					success: (image) => {
+						// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
+						image.path = localReg.test(img) ?  `/${image.path}` : image.path;
+						// #endif
+						// image.path = /^(http|\/\/|\/|wxfile|data:image\/(\w+);base64|file|bdfile|ttfile|blob)/.test(image.path) ? image.path : `/${image.path}`;
+						cache[img] = image
+						resolve(cache[img])
+					},
+					fail(err) {
+						resolve({path: img})
+						console.error(`getImageInfo:fail ${img} failed ${JSON.stringify(err)}`);
+					}
+				})
+			}
+		})
+	}

pages.json

@@ -134,4 +134,5 @@
 		"navigationBarBackgroundColor": "#fff",
 		"backgroundColor": "#F5F5F5"
 	}
+	
 }

pages/index/index.css

@@ -70,3 +70,5 @@ page{background-color: #f5f5f5;}
 .rank-list-user .name{font-size: 28rpx;color: #333;flex: 1;}
 .rank-list-carbon{width: 170rpx;margin-left: 0;font-size: 26rpx;color: #26D18B;line-height: 37rpx;}
 .rank-wrap >>> .nodata {width: auto;padding: 100rpx 0;background-color: #fff;border-radius: 16rpx;}
+
+.product-list .nodata{padding: 100rpx 0;}

pages/index/index.vue

@@ -76,6 +76,7 @@
 					</view>
 				</view>
 				<view class="product-list">
+					<custom-nodata v-if="productList.length<=0"></custom-nodata>
 					<view class="product-list-item" v-for="(item, index) in productList" :key="index" @click="productClick(item)">
 						<image :src="$onlineImg + item.goodsImages | firstImg" class="product-img" mode="heightFix"></image>
 						<view class="product-text">{{item.goodsName}}</view>

pages/index/modal/quickBuy.vue

@@ -52,6 +52,7 @@
 			uniPopup,
 		},
 		created() {
+			this.thetoken = 'Bearer' + ' ' + this.$store.state.token;			
 			let self = this;
 			this.shoppingNum = 1;
 			uni.getStorage({
@@ -83,6 +84,7 @@
 		},
 		data() {
 			return {
+				thetoken:'',
 				$getimg:this.config.$getimg,
 				customerType:null,
 				shoppingNum:'',
@@ -103,12 +105,12 @@
 					this.helpPeople[0].carbonSkin = this.shoppingNum;
 					return ;
 				};
-				this.helpPeople = []
-				this.loading = true
+				this.helpPeople = [];
+				this.loading = true;
 				this.$api.http.get(this.config.apiBaseurl + '/carbon-h5/wap/goodsManage/getGoodsInfoByCarbonNum?carbonNum='+this.shoppingNum,{
 					header: {
 					Accept:'application/json',
-					Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
+					Authorization: this.thetoken, //注意Bearer后面有一空格
 				},
 				}).then(res =>{
 					// this.loading = false
@@ -121,7 +123,7 @@
 			},
 			goCart(){
 				console.log('customerType',this.customerType);
-				if(this.customerType!=1){
+				if(this.customerType!=1){//不是个人走线下
 					this.$emit('closeModal',true);
 					this.offlineBuy();
 					// this.$api.href('/pages/offlineBuy/offlineBuy');
@@ -131,6 +133,7 @@
 					this.$api.msg("请等待农户数据加载完毕!")
 					return 
 				}else{
+					this.helpPeople.remark = this.remark;
 					this.$refs.randomPop.close()
 					this.$emit('closeModal',true);
 					this.addCart(this.helpPeople);
@@ -155,7 +158,7 @@
 				self.$api.http.post(this.config.apiBaseurl + "/carbon-h5/wap/apply",offlineparams,{
 					header: {
 					Accept:'application/json',
-					Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
+					Authorization: this.thetoken, //注意Bearer后面有一空格
 				},
 				}).then(res=>{
 					self.$api.href('/pages/usercenter/subscribe/subscribe')

pages/offlineBuy/offlineBuy.vue

@@ -58,7 +58,7 @@
 				<view class="bottom-btn btn" v-if="applyStatus == 0" @click="callnumber(phone01)">
 					联系管理部门
 				</view>
-				<view class="bottom-btn btn" v-if="applyStatus == 1" @click="goOrderDetails(guid)">
+				<view class="bottom-btn btn" v-if="applyStatus == 1" @click="goOrderDetails(orderGuid)">
 					查看订单
 				</view>
 				<!-- <view class="bottom-btn btn" v-if="applyStatus == 2">
@@ -75,6 +75,7 @@
 			return {
 				thetoken:'',
 				guid:'',
+				orderGuid:'',
 				$getimg:this.$getimg,
 				applyStatus:0,
 				time:'2020年11月11日',
@@ -112,7 +113,7 @@
 				this.$api.http.get(this.config.apiBaseurl+'/carbon-h5/wap/apply/'+this.guid,{header: {Authorization:this.thetoken}}).then( res =>{
 					console.log('this.applyStatus',res);
 					this.applyStatus = res.data.data.applyStatus;
-					this.guid = res.data.data.guid;
+					this.orderGuid = res.data.data.orderGuid;
 					console.log('this.applyStatus1',this.applyStatus)
 				})
 			},

pages/usercenter/certificateList/certificate/certificate.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="pages">
+		<!-- <l-painter :board="base"/> 画板待调试 -->
 		<view class="container" id="wrapper">
 			<view class="image-wrapper draw">
 			  <image :src="$getimg+'cqtanhui-cert.jpg'" class="draw page-bg" mode="scaleToFill"></image>
@@ -31,14 +32,17 @@
 		  
 		  <!-- <button class="generate-btn" @click="drawCanvas">generate</button> -->
 		</view>
+		
 		<canvas canvas-id="canvas" class="share-canvas"></canvas>
 	</view>
 </template>
 
 <script>
-	const wxml2canvas = require('@/utils/wxml2canvas.js');
-	const html2canvas = require('@/utils/html2canvas.min.js');
+	import lPainter from '@/components/lime-painter/index.vue';	
 	export default {
+		components:{
+			lPainter
+		},
 		data() {
 			return {
 				$getimg:this.$getimg,
@@ -46,6 +50,38 @@
 				orderid:'',
 				item:[],
 				params:{
+				},
+				base: {
+					width: '750rpx',
+					height: '1130rpx',
+					views: [
+						{
+							type: 'image',
+							src: 'http://fqn.hongweisoft.com/cqcarbon/wxapp/cqtanhui-cert.jpg',
+							css: {
+								left: '0rpx',
+								top: '0rpx',
+								width: '100%',
+								height: '1130rpx'
+							}
+						},
+						{
+							type: 'text',
+							text: '左对齐,下划线\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生',
+							// 可以指定关键字颜色
+							rules: {
+								word: ['到地'],
+								color: 'red'
+							},
+							css: {
+								left: '0rpx',
+								top: '10rpx',
+								fontSize: '28rpx',
+								lineHeight: '36rpx',
+								textDecoration: 'underline'
+							}
+						},
+					]
 				}
 				
 			}

pages/usercenter/orderList/orderList.vue

@@ -27,6 +27,7 @@
 					<!-- order-info end -->
 					<view class="order-product">
 						<image :src="$onlineImg+ item.goodsOrderDetailForm[0].goodsImages | firstImg" class="order-product-img" mode="scaleToFill"></image>
+						<!-- <image :src="$onlineImg+ item.goodsOrderDetailForm | firstImg" class="order-product-img" mode="scaleToFill"></image> -->
 						<view class="order-product-text">
 							<view class="order-product-til">
 								{{item.goodsOrderDetailForm.length}}个碳汇产品，共计{{item.orderCarbonAmount}}kg碳汇量
@@ -36,7 +37,7 @@
 								<text class="amount">{{item.orderAmount}}</text>
 							</view>
 							<view class="order-product-carbon">共{{item.orderCarbonAmount}}kg碳汇量</view>
-							<view class="order-btn topay" v-if="item.orderStatus == 1&&item.state==1" @click.stop="pay(item)">立即支付</view>
+							<view class="order-btn topay" v-if="item.orderStatus == 1&&item.state==1&&item.orderType==1" @click.stop="pay(item)">立即支付</view>
 							<view class="order-btn" v-if="item.orderStatus == 2" @click.stop="goCertDetails(item.guid)">查看证书</view>	
 							<view class="order-btn" v-if="item.orderStatus == 5" @click.stop="goCertDetails(item.guid)">查看证书</view>							
 						</view>

store/index.js

@@ -28,6 +28,7 @@ export default new Vuex.Store({
 	},
 	mutations: {
 		addCart(state,data){
+			console.log('addCart',data);
 			if(data){
 				state.cartListTmp = data
 				console.log("vuex add：",state.cartListTmp)

utils/wxml2canvas.js

@@ -1,545 +0,0 @@
-/* eslint-disable */
-const PROPERTIES = ['hover-class', 'hover-start-time', 'space', 'src']
-const COMPUTED_STYLE = [
-  'color',
-  'font-size',
-  'font-weight',
-  'font-family',
-  'backgroundColor',
-  'border',
-  'border-radius',
-  'box-sizing',
-  'line-height',
-]
-const DEFAULT_BORDER = '0px none rgb(0, 0, 0)'
-const DEFAULT_BORDER_RADIUS = '0px'
-
-// default z-index??
-const DEFAULT_RANK = {
-  view: 0,
-  image: 1,
-  text: 2,
-}
-
-const drawWrapper = (context, data) => {
-  const { backgroundColor, width, height } = data
-  context.setFillStyle(backgroundColor)
-  context.fillRect(0, 0, width, height)
-}
-
-// todo: do more for different language
-const strLen = str => {
-  let count = 0
-  for (let i = 0, len = str.length; i < len; i++) {
-    count += str.charCodeAt(i) < 256 ? 1 : 2
-  }
-  return count / 2
-}
-
-const isMuitlpleLine = (data, text) => {
-  const { 'font-size': letterWidth, width } = data
-  const length = strLen(text)
-  const rowlineLength = length * parseInt(letterWidth, 10)
-  return rowlineLength > width
-}
-
-const drawMutipleLine = (context, data, text) => {
-  const {
-    'font-size': letterWidth,
-    width,
-    left,
-    top,
-    'line-height': lineHeightAttr,
-  } = data
-  const lineHieght = lineHeightAttr === 'normal' ? Math.round(1.2 * letterWidth) : lineHeightAttr
-  const rowLetterCount = Math.floor(width / parseInt(letterWidth, 10))
-  const length = strLen(text)
-  for (let i = 0; i < length; i += rowLetterCount) {
-    const lineText = text.substring(i, i + rowLetterCount)
-    const rowNumber = Math.floor(i / rowLetterCount)
-    const rowTop = top + rowNumber * parseInt(lineHieght, 10)
-    context.fillText(lineText, left, rowTop)
-  }
-}
-
-// enable color, font, for now only support chinese
-const drawText = (context, data) => {
-  const {
-    dataset: { text },
-    left,
-    top,
-    color,
-    'font-weight': fontWeight,
-    'font-size': fontSize,
-    'font-family': fontFamily,
-  } = data
-  const canvasText = Array.isArray(text) ? text[0] : text
-  context.font = `${fontWeight} ${Math.round(
-    parseFloat(fontSize),
-  )}px ${fontFamily}`
-  context.setFillStyle(color)
-  if (isMuitlpleLine(data, canvasText)) {
-    drawMutipleLine(context, data, canvasText)
-  } else {
-    context.fillText(canvasText, left, top)
-  }
-  context.restore()
-}
-
-const getImgInfo = src =>
-  new Promise((resolve, reject) => {
-    wx.getImageInfo({
-      src,
-      success(res) {
-        resolve(res)
-      },
-    })
-  })
-
-const hasBorder = border => border !== DEFAULT_BORDER
-const hasBorderRadius = borderRadius => borderRadius !== DEFAULT_BORDER_RADIUS
-
-const getBorderAttributes = border => {
-  let borderColor, borderStyle
-  let borderWidth = 0
-
-  if (hasBorder) {
-    borderWidth = parseInt(border.split(/\s/)[0], 10)
-    borderStyle = border.split(/\s/)[1]
-    borderColor = border.match(/(rgb).*/gi)[0]
-  }
-  return {
-    borderWidth,
-    borderStyle,
-    borderColor,
-  }
-}
-
-const getImgRect = (imgData, borderWidth) => {
-  const { width, height, left, top } = imgData
-  const imgWidth = width - 2 * borderWidth
-  const imgHeight = height - 2 * borderWidth
-  const imgLeft = left + borderWidth
-  const imgTop = top + borderWidth
-  return {
-    imgWidth,
-    imgHeight,
-    imgLeft,
-    imgTop,
-  }
-}
-
-const getArcCenterPosition = imgData => {
-  const { width, height, left, top } = imgData
-  const coordX = width / 2 + left
-  const coordY = height / 2 + top
-  return {
-    coordX,
-    coordY,
-  }
-}
-
-const getArcRadius = (imgData, borderWidth = 0) => {
-  const { width } = imgData
-  return width / 2 - borderWidth / 2
-}
-
-const getCalculatedImagePosition = (imgData, naturalWidth, naturalHeight) => {
-  const { border } = imgData
-  const { borderWidth } = getBorderAttributes(border)
-  const { imgWidth, imgHeight, imgLeft, imgTop } = getImgRect(
-    imgData,
-    borderWidth,
-  )
-  const ratio = naturalWidth / naturalHeight
-  // tweak for real width and position => center center
-  const realWidth = ratio > 0 ? imgWidth : imgHeight * ratio
-  const realHeight = ratio > 0 ? imgWidth * (1 / ratio) : imgHeight
-  const offsetLeft = ratio > 0 ? 0 : (imgWidth - realWidth) / 2
-  const offsetTop = ratio > 0 ? (imgHeight - realHeight) / 2 : 0
-  return {
-    realWidth,
-    realHeight,
-    left: imgLeft + offsetLeft,
-    top: imgTop + offsetTop,
-  }
-}
-
-const drawArcImage = (context, imgData) => {
-  const { src } = imgData
-  const { coordX, coordY } = getArcCenterPosition(imgData)
-  return getImgInfo(src).then(res => {
-    const { width: naturalWidth, height: naturalHeight } = res
-    const arcRadius = getArcRadius(imgData)
-    context.save()
-    context.beginPath()
-    context.arc(coordX, coordY, arcRadius, 0, 2 * Math.PI)
-    context.closePath()
-    context.clip()
-    const { left, top, realWidth, realHeight } = getCalculatedImagePosition(
-      imgData,
-      naturalWidth,
-      naturalHeight,
-    )
-    context.drawImage(
-      src,
-      0,
-      0,
-      naturalWidth,
-      naturalHeight,
-      left,
-      top,
-      realWidth,
-      realHeight,
-    )
-    context.restore()
-  })
-}
-
-const drawRectImage = (context, imgData) => {
-  const { src, width, height, left, top } = imgData
-
-  return getImgInfo(src).then(res => {
-    const { width: naturalWidth, height: naturalHeight } = res
-    context.save()
-    context.beginPath()
-    context.rect(left, top, width, height)
-    context.closePath()
-    context.clip()
-
-    const {
-      left: realLeft,
-      top: realTop,
-      realWidth,
-      realHeight,
-    } = getCalculatedImagePosition(imgData, naturalWidth, naturalHeight)
-    context.drawImage(
-      src,
-      0,
-      0,
-      naturalWidth,
-      naturalHeight,
-      realLeft,
-      realTop,
-      realWidth,
-      realHeight,
-    )
-    context.restore()
-  })
-}
-
-const drawArcBorder = (context, imgData) => {
-  const { border } = imgData
-  const { coordX, coordY } = getArcCenterPosition(imgData)
-  const { borderWidth, borderColor } = getBorderAttributes(border)
-  const arcRadius = getArcRadius(imgData, borderWidth)
-  context.save()
-  context.beginPath()
-  context.setLineWidth(borderWidth)
-  context.setStrokeStyle(borderColor)
-  context.arc(coordX, coordY, arcRadius, 0, 2 * Math.PI)
-  context.stroke()
-  context.restore()
-}
-
-const drawRectBorder = (context, imgData) => {
-  const { border } = imgData
-  const { left, top, width, height } = imgData
-  const { borderWidth, borderColor } = getBorderAttributes(border)
-
-  const correctedBorderWidth = borderWidth + 1 // draw may cause empty 0.5 space
-  context.save()
-  context.beginPath()
-  context.setLineWidth(correctedBorderWidth)
-  context.setStrokeStyle(borderColor)
-
-  context.rect(
-    left + borderWidth / 2,
-    top + borderWidth / 2,
-    width - borderWidth,
-    height - borderWidth,
-  )
-  context.stroke()
-  context.restore()
-}
-
-// image, enable border-radius: 50%, border, bgColor
-const drawImage = (context, imgData) => {
-  const { border, 'border-radius': borderRadius } = imgData
-  let drawImagePromise
-  if (hasBorderRadius(borderRadius)) {
-    drawImagePromise = drawArcImage(context, imgData)
-  } else {
-    drawImagePromise = drawRectImage(context, imgData)
-  }
-
-  return drawImagePromise.then(() => {
-    if (hasBorder(border)) {
-      if (hasBorderRadius(borderRadius)) {
-        return drawArcBorder(context, imgData)
-      } else {
-        return drawRectBorder(context, imgData)
-      }
-    }
-    return Promise.resolve()
-  })
-}
-
-// e.g. 10%, 4px
-const getBorderRadius = imgData => {
-  const { width, height, 'border-radius': borderRadiusAttr } = imgData
-  const borderRadius = parseInt(borderRadiusAttr, 10)
-  if (borderRadiusAttr.indexOf('%') !== -1) {
-    const borderRadiusX = parseInt(borderRadius / 100 * width, 10)
-    const borderRadiusY = parseInt(borderRadius / 100 * height, 10)
-    return {
-      isCircle: borderRadiusX === borderRadiusY,
-      borderRadius: borderRadiusX,
-      borderRadiusX,
-      borderRadiusY,
-    }
-  } else {
-    return {
-      isCircle: true,
-      borderRadius,
-    }
-  }
-}
-
-const drawViewArcBorder = (context, imgData) => {
-  const { width, height, left, top, backgroundColor, border } = imgData
-  const { borderRadius } = getBorderRadius(imgData)
-  const { borderWidth, borderColor } = getBorderAttributes(border)
-  // console.log('🐞-imgData', imgData)
-  context.beginPath()
-  context.moveTo(left + borderRadius, top)
-  context.lineTo(left + width - borderRadius, top)
-  context.arcTo(
-    left + width,
-    top,
-    left + width,
-    top + borderRadius,
-    borderRadius,
-  )
-  context.lineTo(left + width, top + height - borderRadius)
-  context.arcTo(
-    left + width,
-    top + height,
-    left + width - borderRadius,
-    top + height,
-    borderRadius,
-  )
-  context.lineTo(left + borderRadius, top + height)
-  context.arcTo(
-    left,
-    top + height,
-    left,
-    top + height - borderRadius,
-    borderRadius,
-  )
-  context.lineTo(left, top + borderRadius)
-  context.arcTo(left, top, left + borderRadius, top, borderRadius)
-  context.closePath()
-  if (backgroundColor) {
-    context.setFillStyle(backgroundColor)
-    context.fill()
-  }
-  if (borderColor && borderWidth) {
-    context.setLineWidth(borderWidth)
-    context.setStrokeStyle(borderColor)
-    context.stroke()
-  }
-}
-
-const drawViewBezierBorder = (context, imgData) => {
-  const { width, height, left, top, backgroundColor, border } = imgData
-  const { borderWidth, borderColor } = getBorderAttributes(border)
-  const { borderRadiusX, borderRadiusY } = getBorderRadius(imgData)
-  context.beginPath()
-  context.moveTo(left + borderRadiusX, top)
-  context.lineTo(left + width - borderRadiusX, top)
-  context.quadraticCurveTo(left + width, top, left + width, top + borderRadiusY)
-  context.lineTo(left + width, top + height - borderRadiusY)
-  context.quadraticCurveTo(
-    left + width,
-    top + height,
-    left + width - borderRadiusX,
-    top + height,
-  )
-  context.lineTo(left + borderRadiusX, top + height)
-  context.quadraticCurveTo(
-    left,
-    top + height,
-    left,
-    top + height - borderRadiusY,
-  )
-  context.lineTo(left, top + borderRadiusY)
-  context.quadraticCurveTo(left, top, left + borderRadiusX, top)
-  context.closePath()
-  if (backgroundColor) {
-    context.setFillStyle(backgroundColor)
-    context.fill()
-  }
-  if (borderColor && borderWidth) {
-    context.setLineWidth(borderWidth)
-    context.setStrokeStyle(borderColor)
-    context.stroke()
-  }
-}
-
-// enable border, border-radius, bgColor, position
-const drawView = (context, imgData) => {
-  const { isCircle } = getBorderRadius(imgData)
-  if (isCircle) {
-    drawViewArcBorder(context, imgData)
-  } else {
-    drawViewBezierBorder(context, imgData)
-  }
-}
-
-const isTextElement = item => {
-  const { dataset: { text }, type } = item
-  return Boolean(text) || type === 'text'
-}
-
-const isImageElement = item => {
-  const { src, type } = item
-  return Boolean(src) || type === 'image'
-}
-
-const isViewElement = item => {
-  const { type } = item
-  return type === 'view'
-}
-
-const formatElementData = elements =>
-  elements.map(element => {
-    if (isTextElement(element)) {
-      element.type = 'text'
-      element.rank = DEFAULT_RANK.text
-    } else if (isImageElement(element)) {
-      element.type = 'image'
-      element.rank = DEFAULT_RANK.image
-    } else {
-      element.type = 'view'
-      element.rank = DEFAULT_RANK.view
-    }
-    return element
-  })
-
-// todo: use z-index as order to draw??
-const getSortedElementsData = elements =>
-  elements.sort((a, b) => {
-    if (a.rank < b.rank) {
-      return -1
-    } else if (a.rank > b.rank) {
-      return 1
-    }
-    return 0
-  })
-
-const drawElements = (context, storeItems) => {
-  const itemPromise = []
-  storeItems.forEach(item => {
-    if (isTextElement(item)) {
-      const text = drawText(context, item)
-      itemPromise.push(text)
-    } else if (isImageElement(item)) {
-      const image = drawImage(context, item)
-      itemPromise.push(image)
-    } else {
-      const view = drawView(context, item)
-      itemPromise.push(view)
-    }
-  })
-  return itemPromise
-}
-
-// storeObject: { 0: [...], 1: [...] }
-// chain call promise based on Object key
-const drawElementBaseOnIndex = (context, storeObject, key = 0, drawPromise) => {
-  if (typeof drawPromise === 'undefined') {
-    drawPromise = Promise.resolve()
-  }
-  const objectKey = key // note: key is changing when execute promise then
-  const chainPromise = drawPromise.then(() => {
-    const nextPromise = storeObject[objectKey]
-      ? Promise.all(drawElements(context, storeObject[objectKey]))
-      : Promise.resolve()
-    return nextPromise
-  })
-
-  if (key >= Object.keys(storeObject).length) {
-    return chainPromise
-  } else {
-    return drawElementBaseOnIndex(context, storeObject, key + 1, chainPromise)
-  }
-}
-
-const drawCanvas = (canvasId, wrapperData, innerData) => {
-  const context = wx.createCanvasContext(canvasId)
-  context.setTextBaseline('top')
-
-  // todo: use this after weixin fix stupid clip can't work bug in fillRect
-  // for now, just set canvas background as a compromise
-  drawWrapper(context, wrapperData[0])
-
-  const storeObject = {}
-
-  const sortedElementData = getSortedElementsData(formatElementData(innerData)) // fake z-index
-
-  sortedElementData.forEach(item => {
-    if (!storeObject[item.rank]) {
-      // initialize
-      storeObject[item.rank] = []
-    }
-    if (isTextElement(item) || isImageElement(item) || isViewElement(item)) {
-      storeObject[item.rank].push(item)
-    }
-  })
-  // note: draw is async
-  return drawElementBaseOnIndex(context, storeObject).then(
-    () =>
-      new Promise((resolve, reject) => {
-        context.draw(true, () => {
-          resolve()
-        })
-      }),
-  )
-}
-
-const wxSelectorQuery = element =>
-  new Promise((resolve, reject) => {
-    try {
-      wx
-        .createSelectorQuery()
-        .selectAll(element)
-        .fields(
-          {
-            dataset: true,
-            size: true,
-            rect: true,
-            properties: PROPERTIES,
-            computedStyle: COMPUTED_STYLE,
-          },
-          res => {
-            resolve(res)
-          },
-        )
-        .exec()
-    } catch (error) {
-      reject(error)
-    }
-  })
-
-const wxml2canvas = (wrapperId, elementsClass, canvasId) => {
-  const getWrapperElement = wxSelectorQuery(wrapperId)
-  const getInnerElements = wxSelectorQuery(elementsClass)
-
-  return Promise.all([getWrapperElement, getInnerElements]).then(data => {
-    return drawCanvas(canvasId, data[0], data[1])
-  })
-}
-
-// export default wxml2canvas
-module.exports = wxml2canvas