48 lines
1.2 KiB
HTML
48 lines
1.2 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>uw.gifsicle</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<input style="zoom:2" type="file" id="input">
|
||
|
|
<br>
|
||
|
|
<div id="out"></div>
|
||
|
|
<script type="module">
|
||
|
|
import gifsicle from 'gifsicle.min.js';
|
||
|
|
let input = document.querySelector("#input");
|
||
|
|
input.addEventListener('change', function(e) {
|
||
|
|
let files = Array.from(this.files);
|
||
|
|
loadGif(files[0]);
|
||
|
|
});
|
||
|
|
function loadGif(intFiles) {
|
||
|
|
gifsicle
|
||
|
|
.run({
|
||
|
|
input: [{
|
||
|
|
file: intFiles,
|
||
|
|
name: "1.gif"
|
||
|
|
}],
|
||
|
|
command: [`
|
||
|
|
-e -U
|
||
|
|
--resize 100x_
|
||
|
|
1.gif
|
||
|
|
-o /out/out2.gif
|
||
|
|
`]
|
||
|
|
})
|
||
|
|
.then(async (outfiles) => {
|
||
|
|
let out = document.querySelector("#out");
|
||
|
|
out.innerHTML = "";
|
||
|
|
out.insertAdjacentHTML(
|
||
|
|
"beforeend",
|
||
|
|
`<span><img src="${typeof intFiles ==='string'?intFiles:URL.createObjectURL(intFiles)}"></span><br/>`
|
||
|
|
);
|
||
|
|
outfiles.map((f, indx) => {
|
||
|
|
let url = URL.createObjectURL(f);
|
||
|
|
out.insertAdjacentHTML("beforeend", `<span><img src="${url}"></span>`);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|