mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 10:56:53 +00:00
🤖 Merge PR #44524 [Update] browser-image-compression by @Donaldcwl
This commit is contained in:
parent
bc6433ed6d
commit
ca5bc66bb7
@ -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);
|
||||
}
|
||||
|
||||
10
types/browser-image-compression/index.d.ts
vendored
10
types/browser-image-compression/index.d.ts
vendored
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user