-
Notifications
You must be signed in to change notification settings - Fork 1
/
testimg.html
50 lines (47 loc) · 1.23 KB
/
testimg.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="apngbuilder.js"></script>
<script>
/******************** test from Image ***********************/
async function main() {
/* Create APNGBuilder instance */
const apb = new APNGBuilder();
/* Add each frames */
await apb.addFrame("images/1.png");
await apb.addFrame("images/2.png");
await apb.addFrame("images/3.png");
/* Setup frame delay-time */
apb.setDelay(0.5);
/* Setup number of loops. infinite if 0 */
apb.setNumPlays(0);
/* Get the APNG blob */
const blob = apb.getAPng();
document.getElementById("result").src = URL.createObjectURL(blob);
}
function download(){
console.log("download")
let a = document.createElement("a");
a.download = "test.png";
a.href = document.getElementById("result").src;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
onload=main;
</script>
</head>
<body>
<h1>APNGBuilder Test</h1>
<div id="base">
<img class="frame" id="frame0" src="images/1.png" width="128"/>
<img class="frame" id="frame1" src="images/2.png" width="128"/>
<img class="frame" id="frame2" src="images/3.png" width="128"/>
</div>
<hr/>
<img id="result"/>
<hr/>
<button onclick="download()">Download</button>
</body>
</html>