external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-11 16:26:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Build a demo batch app

Browse Source
This commit is contained in:
Surma
2018-11-28 19:41:36 +00:00
parent 853b305465
commit 4df3a7df83
6 changed files with 55 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
lul/ewag.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

70
lul/index.html
View File

@@ -1,27 +1,67 @@
<!doctype html>
<iframe src="http://localhost:8080" width=800 height=800 id="ifr"></iframe>
<button id="load">Load an image</button>
<button id="extract">extract</button>
<style>
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
header {
flex: 0 0;
padding: 20px;
background-color: #333;
}
header img {
height: 100px;
margin: 20px;
}
iframe {
flex: 1 1;
border: 0;
}
</style>
<header id="header">
<img src="ewag.jpg">
<img src="jakearchibald.jpg">
<img src="jasonjmiller.jpg">
<img src="kosamari.jpg">
<img src="surma.jpg">
<button id="apply">Apply right side to all</button>
</header>
<iframe id="ifr" src="http://localhost:8080"></iframe>
<script src="https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/umd/comlink.js"></script>
<script>
const ifr = document.all.ifr;
const squoosh = Comlink.proxy(ifr.contentWindow);
async function load() {
const blob = await fetch("/profile.jpg").then(resp => resp.blob());
async function load(url) {
const blob = await fetch(url).then(resp => resp.blob());
await squoosh.setFile(blob);
extract();
}
document.all.load.onclick = load;
document.all.header.onclick = ev => load(ev.target.src);
async function extract() {
const file = await squoosh.getBlob(1);
const url = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = url;
document.body.append(img);
document.all.apply.onclick = async ev => {
ev.stopPropagation();
for(const img of document.querySelectorAll("header img")) {
await load(img.src);
const file = await squoosh.getBlob(1);
const url = URL.createObjectURL(file);
downloadFile(url);
}
}
function downloadFile(url) {
const a = document.createElement('a')
a.href = url;
a.download = true;
a.hidden = true;
document.body.append(a);
a.click();
}
document.all.extract.onclick = extract;
</script>

BIN
lul/jakearchibald.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
lul/jasonjmiller.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
lul/kosamari.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

0
lul/profile.jpg → lul/surma.jpg Normal file → Executable file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 644 KiB

After

Width:  |  Height:  |  Size: 644 KiB