This repository has been archived by the owner on Feb 6, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (76 loc) · 2.96 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>APNG/PNGs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container">
<h1>APNG/PNGs</h1>
<div class="alert alert-primary d-none" id="alert-inprogress" role="alert">変換中</div>
<div class="alert alert-success d-none" id="alert-success" role="alert">できました</div>
<div class="alert alert-danger d-none" id="alert-error" role="alert">だめでした</div>
<form>
<div class="row">
<label for="file">
↓変換したいファイル
</label>
<input type="file" class="form-control-file" id="file" />
</div>
</div>
</form>
<script>
(async () => {
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const OUTDIR = 'output';
const alertInprogress = document.getElementById('alert-inprogress');
const alertSuccess = document.getElementById('alert-success');
const alertError = document.getElementById('alert-error');
document
.getElementById('file')
.addEventListener('change', async ({ target: { files: [ file, ..._ ] } }) => {
try {
alertInprogress.classList.remove("d-none");
await ffmpeg.load();
// convert
ffmpeg.FS('mkdir', OUTDIR);
ffmpeg.FS('writeFile', 'input.png', await fetchFile(file));
await ffmpeg.run(
'-f', 'apng',
'-i', 'input.png',
'-vsync', '0',
`${OUTDIR}/%04d.png`,
);
const files = ffmpeg.FS('readdir', `${OUTDIR}/`)
.filter((name) => !/^\.+$/.test(name))
.map(
(name) => ({
name,
content: ffmpeg.FS('readFile', `${OUTDIR}/${name}`),
})
);
// save
const zip = new JSZip();
const folder = zip.folder(file.name);
files.forEach(
({ name, content }) => folder.file(name, content, { binary: true })
);
const content = await zip.generateAsync({type:"blob"});
saveAs(content, `${file.name}.zip`);
alertSuccess.classList.remove("d-none");
} catch (e) {
alertError.classList.remove("d-none");
} finally {
alertInprogress.classList.add("d-none");
}
});
})();
</script>
</body>
</html>