🤖 Merge PR #44524 [Update] browser-image-compression by @Donaldcwl

This commit is contained in:
Donald Chan 2020-05-07 06:45:53 +08:00 committed by GitHub
parent bc6433ed6d
commit ca5bc66bb7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 16 deletions

View File

@ -1,22 +1,33 @@
import imageCompression = require('browser-image-compression');
async function handleImageUpload({ target }: { target: EventTarget & { files: FileList } }) {
const imageFile = target.files[0];
console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);
const imageFile: File = target.files[0];
console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);
const options = {
maxSizeMB: 1,
maxWidthOrHeight: 1920,
useWebWorker: true
};
try {
const compressedFile = await imageCompression(imageFile, options);
console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
const options = {
maxSizeMB: 1,
maxWidthOrHeight: 1920,
useWebWorker: true,
};
try {
const compressedFile = await imageCompression(imageFile, options);
console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
// await uploadToServer(compressedFile); // write your own logic
} catch (error) {
console.log(error);
}
// await uploadToServer(compressedFile); // write your own logic
} catch (error) {
console.log(error);
}
}
async function advancedFunctions(file: File) {
const base64: string = await imageCompression.getDataUrlFromFile(file);
const file2 = await imageCompression.getFilefromDataUrl(base64, file.name, file.lastModified);
const img: HTMLImageElement = await imageCompression.loadImage(base64);
const canvas = imageCompression.drawImageInCanvas(img);
const [img2, canvas2] = await imageCompression.drawFileInCanvas(file2);
const file3 = await imageCompression.canvasToFile(canvas, file.type, file.name, file.lastModified);
const exifOri: number = await imageCompression.getExifOrientation(file3);
console.log(img2, canvas2, exifOri);
}

View File

@ -22,6 +22,16 @@ interface Options {
declare function imageCompression(image: File | Blob, options: Options): Promise<File | Blob>;
declare namespace imageCompression {
function getDataUrlFromFile(file: File | Blob): Promise<string>;
function getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File | Blob>;
function loadImage(src: string): Promise<HTMLImageElement>;
function drawImageInCanvas(img: HTMLImageElement): HTMLCanvasElement;
function drawFileInCanvas(file: File | Blob): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement]>;
function canvasToFile(canvas: HTMLCanvasElement, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File | Blob>;
function getExifOrientation(file: File | Blob): Promise<number>;
}
export as namespace imageCompression;
export = imageCompression;