DrawBoard/index.html at master · HideInMatrix/DrawBoard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>画布工具</title>
		<link href="./dist/DrawBoard.css" rel="stylesheet" />
		<style>
			*,
			html {
				padding: 0;
				margin: 0;
			}

			ul,
			li {
				list-style: none;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div class="test"></div>
		<button id="getImage">确认</button>
		<div id="testImages"></div>
		<script src="./dist/DrawBoard.js"></script>
		<script>
			let { BoardStage } = DrawBoard;
			let boardStage = new BoardStage({
				container: ".test",

				images: [
					{
						id: 1,
						url: "data:image/jpeg;base64,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",
					},
					{
						id: 2,
						url: "data:image/jpeg;base64,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",
					},
				],
			});
			document.getElementById("getImage").addEventListener("click", () => {
				// let _images = boardStage.saveImage();
				boardStage.updateImages([
					{
						id: 1,
						url: "data:image/jpeg;base64,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",
					},
				]);
			});
		</script>
	</body>
</html>