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

Restore compressor settings after load via API

Browse Source
This commit is contained in:
Surma
2018-11-29 00:19:59 +00:00
parent 4df3a7df83
commit bb3bd2d46a
7 changed files with 18 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
lul/ewag.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

67
lul/index.html
View File

@@ -1,67 +0,0 @@
<!doctype html>
<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(url) {
const blob = await fetch(url).then(resp => resp.blob());
await squoosh.setFile(blob);
}
document.all.header.onclick = ev => load(ev.target.src);
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();
}
</script>

BIN
lul/jakearchibald.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 MiB

BIN
lul/jasonjmiller.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
lul/kosamari.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
lul/surma.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 644 KiB

22
src/components/App/index.tsx
View File

@@ -107,11 +107,25 @@ export default class App extends Component<Props, State> {
private exposeAPI() { private exposeAPI() {
const api = { const api = {
setFile: (blob: Blob, name: string) => { setFile: async (blob: Blob, name: string) => {
return new Promise((resolve) => { let oldCompressorState = this.compressInstance && this.compressInstance.state;
this.setState({ file: new File([blob], name) }); await new Promise((resolve) => {
document.addEventListener('squooshingdone', () => resolve(), { once: true }); this.setState({ file: new File([blob], name) }, resolve);
}); });
await new Promise((resolve) => {
document.addEventListener('squooshingdone', resolve, { once: true });
});
if (oldCompressorState) {
let newState = this.compressInstance!.state;
[0, 1].forEach((index) => {
oldCompressorState = cleanMerge(oldCompressorState!, `images.${index}`, {
loading: false,
data: undefined,
});
newState = cleanSet(newState, `images.${index}`, oldCompressorState.images[index]);
});
this.compressInstance!.setState(newState);
}
}, },
getBlob: async (side: 0 | 1) => { getBlob: async (side: 0 | 1) => {
if (!this.state.file || !this.compressInstance) { if (!this.state.file || !this.compressInstance) {