zkx
/
jp-education-student


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<style type="text/css">
			html,
			body,
			canvas {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
				overflow-y: hidden;
				background-color: transparent;
			}
		</style>
	</head>

	<body>
		<canvas id="lime-signature"></canvas>
		<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
		<script type="text/javascript" src="./signature.js"></script>
		<script>
			var signature = null;
			var timer = null;
			var isStart = false;
			var options = null
			console.log = function(...args) {
				postMessage(args);
			};
			// function stringify(key, value) {
			// 	if (typeof value === 'object' && value !== null) {
			// 		if (cache.indexOf(value) !== -1) {
			// 			return;
			// 		}
			// 		cache.push(value);
			// 	}
			// 	return value;
			// };
			function emit(event, data) {
				postMessage({
					event,
					data: typeof data !== "object" && data !== null ? data : JSON.stringify(data),
				});
				// cache = [];
			}

			function postMessage(data) {
				uni.postMessage({
					data
				});
			}

			function update(v = {}) {
				if (signature) {
					options = v
					signature.pen.setOption(v);
				} else {
					signature = new Signature.Signature({el: "lime-signature"});
					canvasEl = signature.canvas.get("el");
					options = v
					signature.pen.setOption(v)
					const width = signature.canvas.get("width");
					const height = signature.canvas.get("height");
					
					emit({changeSize: {width,height}})
				}
			}

			function clear() {
				signature.clear()
			}

			function undo() {
				signature.undo()
			}
			function isEmpty() {
				const isEmpty = signature.isEmpty()
				emit({isEmpty});
			}
			function save(args) {
				// delete args.success;
				// delete args.fail;
				clearTimeout(timer);
				timer = setTimeout(() => {
					let path = canvasEl.toDataURL()
					if(options.backgroundColor) {
						const canvas = document.createElement('canvas')
						const width = signature.canvas.get('width')
						const height = signature.canvas.get('height')
						const pixelRatio = signature.canvas.get('pixelRatio')
						canvas.width = width * pixelRatio
						canvas.height = height * pixelRatio
						const context = canvas.getContext('2d')
						context.scale(pixelRatio, pixelRatio)
						context.fillStyle = backgroundColor
						context.fillRect(0,0, width, height)
						context.drawImage(signature.canvas.get('el'), 0, 0, width, height)
						path = canvas.toDataURL()
						canvas.remove()
					} 
					if (typeof path == "string") {
						const index = Math.ceil(path.length / 8);
						for (var i = 0; i < 8; i++) {
							if (i == 7) {
								emit({"success": path.substr(i * index, index)});
							} else {
								emit({"file": path.substr(i * index, index)});
							}
						}
					} else {
						console.error("canvas no data");
						emit({"fail": "canvas no data"});
					}
				}, 30);
			}
		</script>
	</body>
</html>