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

Simple API test

Browse Source
This commit is contained in:
Surma
2018-11-28 16:04:36 +00:00
parent 3039c84738
commit 9a230adc03
3 changed files with 51 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
lul/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!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>
<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());
await squoosh.setFile(blob);
console.log('done')
}
document.all.load.onclick = load;
async function extract() {
const file = await squoosh.getBlob(1);
console.log('asdf', file)
const url = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = url;
document.body.append(img);
}
document.all.extract.onclick = extract;
</script>

BIN
lul/profile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 644 KiB

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

@@ -36,6 +36,7 @@ export default class App extends Component<Props, State> {
file: undefined, file: undefined,
Compress: undefined, Compress: undefined,
}; };
private compressInstance?: import('../compress').default;
snackbar?: SnackBarElement; snackbar?: SnackBarElement;
@@ -69,6 +70,7 @@ export default class App extends Component<Props, State> {
}); });
window.addEventListener('popstate', this.onPopState); window.addEventListener('popstate', this.onPopState);
this.exposeAPI();
} }
@bind @bind
@@ -103,6 +105,21 @@ export default class App extends Component<Props, State> {
this.setState({ isEditorOpen: true }); this.setState({ isEditorOpen: true });
} }
private exposeAPI() {
const api = {
setFile: (blob: Blob, name: string) => {
this.setState({ file: new File([blob], name) });
},
getBlob: async (side: 0 | 1) => {
if (!this.state.file || !this.compressInstance) {
throw new Error('No file has been loaded');
}
return this.compressInstance.state.images[side].file;
},
};
expose(api, self.parent);
}
render({}: Props, { file, isEditorOpen, Compress }: State) { render({}: Props, { file, isEditorOpen, Compress }: State) {
return ( return (
<div id="app" class={style.app}> <div id="app" class={style.app}>
@@ -110,7 +127,12 @@ export default class App extends Component<Props, State> {
{!isEditorOpen {!isEditorOpen
? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} /> ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
: (Compress) : (Compress)
? <Compress file={file!} showSnack={this.showSnack} onBack={back} /> ? <Compress
ref={i => this.compressInstance = i}
file={file!}
showSnack={this.showSnack}
onBack={this.onBack}
/>
: <loading-spinner class={style.appLoader}/> : <loading-spinner class={style.appLoader}/>
} }
<snack-bar ref={linkRef(this, 'snackbar')} /> <snack-bar ref={linkRef(this, 'snackbar')} />