images-merger/index.html at master · open-node/images-merger · 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
<html>
<head>
<title>图片合并</title>
<style>
canvas {
  border: 1px solid #000;
  display: block;
  background: #000;
}
</style>
</head>
<body>
<script src="./browser.js"></script>
<label for="avatar">Choose some picture:</label>
<div>
  <input type="file" id="select-imgs"  multiple accept="image/*">
</div>
<div>
  <h3>合并后的图片信息</h3>
  <div id="map"></div>
</div>
<canvas id="mycanvas"></canvas>
<script>
const textarea = document.getElementById('map');
const merger = new Merger(document.getElementById('mycanvas'), Image);
const input = document.getElementById('select-imgs');
input.onchange = async () => {
  const [data, map] = await merger.merge(input.files);
  textarea.innerHTML = `<pre>${map.map(x => x.join(' ')).join('\n')}</pre>`;
};
</script>
</body>
</html>