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

Edge file constructor fix (#180)

Browse Source 
* Hacking around lack of `new File` in Edge.

* Less hacky solution - preserves types
This commit is contained in:
Jake Archibald
2018-09-28 14:44:59 +01:00
committed by GitHub
parent 5e66e0acc4
commit cfd42818b7
5 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import { bind, linkRef } from '../../lib/util'; import { bind, linkRef, Fileish } from '../../lib/util';
import * as style from './style.scss'; import * as style from './style.scss';
import Output from '../Output'; import Output from '../Output';
import Options from '../Options'; import Options from '../Options';
@@ -48,7 +48,7 @@ export interface SourceImage {
interface EncodedImage { interface EncodedImage {
preprocessed?: ImageData; preprocessed?: ImageData;
file?: File; file?: Fileish;
downloadUrl?: string; downloadUrl?: string;
data?: ImageData; data?: ImageData;
preprocessorState: PreprocessorState; preprocessorState: PreprocessorState;
@@ -87,11 +87,12 @@ async function preprocessImage(
} }
return result; return result;
} }
async function compressImage( async function compressImage(
image: ImageData, image: ImageData,
encodeData: EncoderState, encodeData: EncoderState,
sourceFilename: string, sourceFilename: string,
): Promise<File> { ): Promise<Fileish> {
const compressedData = await (() => { const compressedData = await (() => {
switch (encodeData.type) { switch (encodeData.type) {
case optiPNG.type: return optiPNG.encode(image, encodeData.options); case optiPNG.type: return optiPNG.encode(image, encodeData.options);
@@ -111,7 +112,7 @@ async function compressImage(
const encoder = encoderMap[encodeData.type]; const encoder = encoderMap[encodeData.type];
return new File( return new Fileish(
[compressedData], [compressedData],
sourceFilename.replace(/.[^.]*$/, `.${encoder.extension}`), sourceFilename.replace(/.[^.]*$/, `.${encoder.extension}`),
{ type: encoder.mimeType }, { type: encoder.mimeType },
@@ -275,7 +276,7 @@ export default class App extends Component<Props, State> {
const image = images[index]; const image = images[index];
let file: File | undefined; let file: File | Fileish | undefined;
let preprocessed: ImageData | undefined; let preprocessed: ImageData | undefined;
let data: ImageData | undefined; let data: ImageData | undefined;
const cacheResult = this.encodeCache.match(source, image.preprocessorState, image.encoderState); const cacheResult = this.encodeCache.match(source, image.preprocessorState, image.encoderState);

4
src/components/App/result-cache.ts
View File

@@ -1,5 +1,5 @@
import { EncoderState } from '../../codecs/encoders'; import { EncoderState } from '../../codecs/encoders';
import { shallowEqual } from '../../lib/util'; import { shallowEqual, Fileish } from '../../lib/util';
import { SourceImage } from '.'; import { SourceImage } from '.';
import { PreprocessorState } from '../../codecs/preprocessors'; import { PreprocessorState } from '../../codecs/preprocessors';
@@ -8,7 +8,7 @@ import * as identity from '../../codecs/identity/encoder';
interface CacheResult { interface CacheResult {
preprocessed: ImageData; preprocessed: ImageData;
data: ImageData; data: ImageData;
file: File; file: Fileish;
} }
interface CacheEntry extends CacheResult { interface CacheEntry extends CacheResult {

4
src/components/Options/index.tsx
View File

@@ -1,7 +1,7 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import * as style from './style.scss'; import * as style from './style.scss';
import { bind } from '../../lib/util'; import { bind, Fileish } from '../../lib/util';
import { cleanSet, cleanMerge } from '../../lib/clean-modify'; import { cleanSet, cleanMerge } from '../../lib/clean-modify';
import OptiPNGEncoderOptions from '../../codecs/optipng/options'; import OptiPNGEncoderOptions from '../../codecs/optipng/options';
import MozJpegEncoderOptions from '../../codecs/mozjpeg/options'; import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
@@ -65,7 +65,7 @@ interface Props {
sourceAspect: number; sourceAspect: number;
imageIndex: number; imageIndex: number;
sourceImageFile?: File; sourceImageFile?: File;
imageFile?: File; imageFile?: Fileish;
downloadUrl?: string; downloadUrl?: string;
encoderState: EncoderState; encoderState: EncoderState;
preprocessorState: PreprocessorState; preprocessorState: PreprocessorState;

1
src/components/Output/index.tsx
View File

@@ -155,6 +155,7 @@ export default class Output extends Component<Props, State> {
return ( return (
<div class={`${style.output} ${altBackground ? style.altBackground : ''}`}> <div class={`${style.output} ${altBackground ? style.altBackground : ''}`}>
<two-up <two-up
legacy-clip-compat
orientation={orientation} orientation={orientation}
// Event redirecting. See onRetargetableEvent. // Event redirecting. See onRetargetableEvent.
onTouchStartCapture={this.onRetargetableEvent} onTouchStartCapture={this.onRetargetableEvent}

8
src/lib/util.ts
View File

@@ -238,3 +238,11 @@ export function konami(): Promise<void> {
window.addEventListener('keydown', listener); window.addEventListener('keydown', listener);
}); });
} }
// Edge doesn't support `new File`, so here's a hacky alternative.
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9551546/
export class Fileish extends Blob {
constructor(data: any[], public name: string, opts?: BlobPropertyBag) {
super(data, opts);
}
}