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

Actually piping the data through the compressor

Browse Source
This commit is contained in:
Surma
2018-05-17 22:27:24 +01:00
parent 8daaea5768
commit 49db0de05f
3 changed files with 48 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/app/index.tsx
View File

@@ -25,14 +25,28 @@ export default class App extends Component<Props, State> {
}
}
private async getImageData(bitmap: ImageBitmap): Promise<ImageData> {
// Make canvas same size as image
const canvas = document.createElement('canvas');
[canvas.width, canvas.height] = [bitmap.width, bitmap.height];
// Draw image onto canvas
const ctx = canvas.getContext('2d');
if (!ctx) {
throw new Error("Could not create canvas contex");
}
ctx.drawImage(bitmap, 0, 0);
return ctx.getImageData(0, 0, bitmap.width, bitmap.height);
}
@bind
async onFileChange(event: Event) {
const fileInput = event.target as HTMLInputElement;
if (!fileInput.files || !fileInput.files[0]) return;
// TODO: handle decode error
const img = await createImageBitmap(fileInput.files[0]);
const bitmap = await createImageBitmap(fileInput.files[0]);
const data = await this.getImageData(bitmap);
const encoder = new MozJpegEncoder();
const compressedData = await encoder.encode(img);
const compressedData = await encoder.encode(data);
const blob = new Blob([compressedData], {type: 'image/jpeg'});
const compressedImage = await createImageBitmap(blob);
this.setState({ img: compressedImage });
@@ -53,3 +67,4 @@ export default class App extends Component<Props, State> {
);
}
}