-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (132 loc) · 3.8 KB
/
index.html
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="A signature library for web & Mobile. Contribute to ifakejs/signature development by creating an account on GitHub.">
<title>A Signature Library For Web & Mobile.</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
#app {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
#app-title {
text-align: center;
height: 60px;
line-height: 60px;
}
#app canvas {
border: 2px dashed #4bc7c4;
flex: 1;
}
a {
color: #4bc7c4;
font-size: 18px;
font-weight: bold;
}
@media screen and (max-width: 800px) {
#app-title {
text-align: center;
height: 90px;
line-height: inherit;
padding: 10px;
font-size: 14px;
}
}
</style>
</head>
<body>
<div id="app">
<div id="app-title">
<a href="https://github.com/ifakejs/signature" target="_blank" title="Github">Github</a>
<label title="A Signature Library For Web & Mobile.">A signature library for Web & Mobile.
<select id="app-select">
<option value="0" title="Normal">正常</option>
<option value="90" title="Rotate 90 degrees clockwise">顺时针旋转90°</option>
<option value="180" title="Rotate 180 degrees clockwise">顺时针旋转180°</option>
<option value="-90" title="Rotate 90 degrees counterclockwise">逆时针旋转90°</option>
</select>
</label>
<button class="get-blob" title="Download">下载</button>
<button class="clear-blob" title="Clear">清除</button>
<a href="/index-default.html" title="Ordinary drawing board (no rotation)">普通画板</a>
<a href="/index-with-guide-line.html" title="Drawing board with guide line (no rotation)">网格画板</a>
</div>
<!-- canvas will be inject here -->
</div>
<script src="dist/index.umd.js"></script>
<script>
let instance = null
function $(target) {
return document.querySelector(target)
}
function init(degree = 0) {
if (instance) {
instance.destory()
instance = null
}
instance = new window.IfSignature({
target: '#app',
degree,
canvasProcessor: canvas => {
console.log(canvas)
},
ctxProcessor: ctx => {
console.log(ctx)
}
})
}
init()
$('#app-select').addEventListener('change', e => {
const degree = ~~e.target.value
const d = document;
const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
let length = (h - w) / 2;
let width = w;
let height = h;
if (degree === -90) {
length = -length;
width = h;
height = w;
} else if (degree === 90) {
width = h;
height = w;
} else {
length = 0;
}
$('#app').setAttribute('style', `
transform: rotate(${degree}deg) translate(${length}px, ${length}px);
width: ${width}px;
height: ${height}px;
transform-origin: center center;
`.replace(/\n*\s*/gm, ''))
init(-degree)
})
$('.get-blob').addEventListener('click', async () => {
const blob = await instance.getBlobWithWhiteBG()
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.setAttribute('download', 'canvas')
a.click()
})
$('.clear-blob').addEventListener('click', () => {
instance.clear()
})
</script>
</body>
</html>