<!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>