Public
Script
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
import ImageBlobReduce from "https://cdn.skypack.dev/image-blob-reduce";
const fileInput = document.getElementById("file") as HTMLInputElement;
const imageOutput = document.getElementById("preview") as HTMLImageElement;
const uploadButton = document.getElementById("upload");
const form = fileInput.closest("form");
const iframe = document.getElementById("results");
fileInput.addEventListener("change", async (event) => {
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
console.log("Compressing...");
console.log(file.size);
const reducer = new ImageBlobReduce({
pica: ImageBlobReduce.pica({ features: ["js", "wasm", "ww"] }),
});
const compressedBlob = await reducer
.toBlob(
file,
{
max: 200,
unsharpAmount: 80,
unsharpRadius: 0.6,
unsharpThreshold: 2,
},
);
const newFile = new File([compressedBlob], file.name, { type: file.type });
let list = new DataTransfer();
console.log(newFile.size);
list.items.add(newFile);
fileInput.files = list.files;
imageOutput.src = URL.createObjectURL(compressedBlob);
uploadButton.remove();
form.submit();
iframe.classList.remove("hidden");
}
});
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
April 24, 2024