browser image compression
v2.0.2
Модуль Javascript для запуска в веб-браузере для сжатия изображений.
откройте https://donaldcwl.github.io/browser-image-compression/example/basic.html
или проверьте папку «example» в этом репозитории
< input type =" file " accept =" image/* " onchange =" handleImageUpload(event); " > async function handleImageUpload ( event ) {
const imageFile = event . 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
await uploadToServer ( compressedFile ) ; // write your own logic
} catch ( error ) {
console . log ( error ) ;
}
} function handleImageUpload ( event ) {
var imageFile = event . target . files [ 0 ] ;
console . log ( 'originalFile instanceof Blob' , imageFile instanceof Blob ) ; // true
console . log ( `originalFile size ${ imageFile . size / 1024 / 1024 } MB` ) ;
var options = {
maxSizeMB : 1 ,
maxWidthOrHeight : 1920 ,
useWebWorker : true
}
imageCompression ( imageFile , options )
. then ( function ( compressedFile ) {
console . log ( 'compressedFile instanceof Blob' , compressedFile instanceof Blob ) ; // true
console . log ( `compressedFile size ${ compressedFile . size / 1024 / 1024 } MB` ) ; // smaller than maxSizeMB
return uploadToServer ( compressedFile ) ; // write your own logic
} )
. catch ( function ( error ) {
console . log ( error . message ) ;
} ) ;
} Вы можете установить его через npm или Yarn.
npm install browser-image-compression --save
# or
yarn add browser-image-compression import imageCompression from 'browser-image-compression' ;(может использоваться в таких средах, как React, Angular, Vue и т. д.)
(работа с упаковщиками, такими как Webpack и Rollup)
Вы можете скачать imageCompression из папки dist.
Альтернативно вы можете использовать CDN, например delivrjs:
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/browser-image-compression.js " > </ script > Если этот проект поможет вам сократить время на разработку, вы можете купить мне чашечку кофе :)
(при поддержке Stripe)
// you should provide one of maxSizeMB, maxWidthOrHeight in the options
const options : Options = {
maxSizeMB : number , // (default: Number.POSITIVE_INFINITY)
maxWidthOrHeight : number , // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)
// but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser.
// Please check the Caveat part for details.
onProgress : Function , // optional, a function takes one progress argument (percentage from 0 to 100)
useWebWorker : boolean , // optional, use multi-thread web worker, fallback to run in main-thread (default: true)
libURL : string , // optional, the libURL of this library for importing script in Web Worker (default: https://cdn.jsdelivr.net/npm/browser-image-compression/dist/browser-image-compression.js)
preserveExif : boolean , // optional, use preserve Exif metadata for JPEG image e.g., Camera model, Focal length, etc (default: false)
signal : AbortSignal , // optional, to abort / cancel the compression
// following options are for advanced users
maxIteration : number , // optional, max number of iteration to compress the image (default: 10)
exifOrientation : number , // optional, see https://stackoverflow.com/a/32490603/10395024
fileType : string , // optional, fileType override e.g., 'image/jpeg', 'image/png' (default: file.type)
initialQuality : number , // optional, initial quality value between 0 and 1 (default: 1)
alwaysKeepResolution : boolean // optional, only reduce quality, always keep width and height (default: false)
}
imageCompression ( file : File , options : Options ) : Promise < File > Каждый браузер ограничивает максимальный размер объекта Canvas браузера.
Итак, мы изменяем размер изображения до размера меньше максимального, который ограничивает каждый браузер.
(Однако proportion/ratio изображения сохраняются.)
Чтобы использовать эту функцию, проверьте совместимость браузера: https://caniuse.com/?search=AbortController.
function handleImageUpload ( event ) {
var imageFile = event . target . files [ 0 ] ;
var controller = new AbortController ( ) ;
var options = {
// other options here
signal : controller . signal ,
}
imageCompression ( imageFile , options )
. then ( function ( compressedFile ) {
return uploadToServer ( compressedFile ) ; // write your own logic
} )
. catch ( function ( error ) {
console . log ( error . message ) ; // output: I just want to stop
} ) ;
// simulate abort the compression after 1.5 seconds
setTimeout ( function ( ) {
controller . abort ( new Error ( 'I just want to stop' ) ) ;
} , 1500 ) ;
} imageCompression . getDataUrlFromFile ( file : File ) : Promise < base64 encoded string >
imageCompression . getFilefromDataUrl ( dataUrl : string , filename : string , lastModified ?: number ) : Promise < File >
imageCompression . loadImage ( url : string ) : Promise < HTMLImageElement >
imageCompression . drawImageInCanvas ( img : HTMLImageElement , fileType ?: string ) : HTMLCanvasElement | OffscreenCanvas
imageCompression . drawFileInCanvas ( file : File , options ?: Options ) : Promise < [ ImageBitmap | HTMLImageElement , HTMLCanvasElement | OffscreenCanvas ] >
imageCompression . canvasToFile ( canvas : HTMLCanvasElement | OffscreenCanvas , fileType : string , fileName : string , fileLastModified : number , quality ?: number ) : Promise < File >
imageCompression . getExifOrientation ( file : File ) : Promise < number > // based on https://stackoverflow.com/a/32490603/10395024
imageCompression . copyExifWithoutOrientation ( copyExifFromFile : File , copyExifToFile : File ) : Promise < File > // based on https://gist.github.com/tonytonyjan/ffb7cd0e82cb293b843ece7e79364233 IE / Край | Firefox | Хром | Сафари | iOS Сафари | Опера |
|---|---|---|---|---|---|
| IE10, IE11, Край | последние 2 версии | последние 2 версии | последние 2 версии | последние 2 версии | последние 2 версии |
Эта библиотека использует функции ES, такие как Promise API, globalThis. Если вам нужна поддержка браузеров, которые не поддерживают новые функции ES, такие как IE. Вы можете включить в свой проект полифил core-js.
Вы можете включить следующий скрипт для загрузки полифила core-js:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/core-js/3.21.1/minified.min.js " > </ script >Сжатие WebP поддерживается в основных браузерах. Пожалуйста, посетите https://caniuse.com/mdn-api_offscreencanvas_converttoblob_option_type_parameter_webp для совместимости с браузером.
Браузер должен поддерживать API OffscreenCanvas, чтобы использовать преимущества неблокирующего сжатия. Если браузер не поддерживает API OffscreenCanvas, вместо него используется основной поток. См. https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility, чтобы узнать о совместимости API OffscreenCanvas с браузером.
Определения машинописных текстов включены в пакет и на них есть ссылки в разделе types файла package.json
Если на вашем веб-сайте включен CSP и вы хотите использовать Web Worker (useWebWorker: true), добавьте следующее в заголовок ответа content-security-policy: script-src 'self' blob: https://cdn.jsdelivr.net
blob: предназначен для загрузки сценария Web Worker.https://cdn.jsdelivr.net предназначен для импорта этой библиотеки из CDN внутри сценария Web Worker. Если вы не хотите загружать эту библиотеку из CDN, вы можете установить URL-адрес собственной библиотеки в options.libURL . npm run watch # он будет наблюдать за изменением кода в папке lib/ и генерировать js в папке dist/npm run test
