browser image compression Télécharger - browser image compression Téléchargement du code source

Compression des images du navigateur

Module Javascript à exécuter dans le navigateur Web pour la compression des images.

Caractéristiques

Vous pouvez utiliser ce module pour compresser des images jpeg, png, webp et bmp en réduisant la résolution ou la taille de stockage avant de les télécharger sur le serveur d'applications afin d'économiser de la bande passante.
La compression non bloquante multithread (Web Worker) est prise en charge via des options.

Démo / Exemple

ouvrez https://donaldcwl.github.io/browser-image-compression/example/basic.html

ou vérifiez le dossier "exemple" dans ce dépôt

Usage

 < input type =" file " accept =" image/* " onchange =" handleImageUpload(event); " >

syntaxe d'attente asynchrone :

 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 ) ;
  }

}

Syntaxe Promise.then().catch() :

Cliquez pour agrandir

 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 ) ;
    } ) ;
}

Installation

Utiliser comme module ES :

Vous pouvez l'installer via npm ou fil

npm install browser-image-compression --save
# or
yarn add browser-image-compression

 import imageCompression from 'browser-image-compression' ;

(peut être utilisé dans des frameworks comme React, Angular, Vue, etc.)

(travaillez avec des bundles comme webpack et rollup)

(ou) Charger le fichier UMD js :

Vous pouvez télécharger imageCompression à partir du dossier dist.

Alternativement, vous pouvez utiliser un CDN comme delivrjs :

 < script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/browser-image-compression.js " > </ script >

Soutien

Si ce projet vous aide à réduire le temps de développement, vous pouvez m'offrir une tasse de café :)

(propulsé par Stripe)

API

Fonction principale

 // 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 >

Mise en garde

Chaque navigateur limite la taille maximale d'un objet Canvas du navigateur.
Nous redimensionnons donc l’image à une taille inférieure à la taille maximale restreinte par chaque navigateur.
(Cependant, le proportion/ratio de l'image demeure.)

Abandonner/Annuler la compression

Pour utiliser cette fonctionnalité, veuillez vérifier la compatibilité du navigateur : 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 ) ;
}

Fonction d'assistance

pour les utilisateurs avancés uniquement, la plupart des utilisateurs n'auront pas besoin d'utiliser les fonctions d'assistance

 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

Prise en charge des navigateurs

IE/Bord	Firefox	Chrome	Safari	iOSSafari	Opéra
IE10, IE11, Bord	les 2 dernières versions	les 2 dernières versions	les 2 dernières versions	les 2 dernières versions	les 2 dernières versions

Prise en charge d'IE

Cette bibliothèque utilise des fonctionnalités ES telles que l'API Promise, globalThis. Si vous devez prendre en charge des navigateurs qui ne prennent pas en charge les nouvelles fonctionnalités ES comme IE. Vous pouvez inclure le polyfill core-js dans votre projet.

Vous pouvez inclure le script suivant pour charger le polyfill core-js :

 < script src =" https://cdnjs.cloudflare.com/ajax/libs/core-js/3.21.1/minified.min.js " > </ script >

Prise en charge Webp

La compression webp est prise en charge sur les principaux navigateurs. Veuillez consulter https://caniuse.com/mdn-api_offscreencanvas_converttoblob_option_type_parameter_webp pour connaître la compatibilité du navigateur.

Remarques pour que la compression fonctionne dans Web Worker

Le navigateur doit prendre en charge l'API "OffscreenCanvas" afin de profiter de la compression non bloquante. Si le navigateur ne prend pas en charge l'API "OffscreenCanvas", le thread principal est utilisé à la place. Voir https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility pour connaître la compatibilité du navigateur avec l'API "OffscreenCanvas".

Définitions des types dactylographiés

Les définitions dactylographiées sont incluses dans le package et référencées dans la section types du package.json

Remarques sur la politique de sécurité du contenu (CSP)

Si CSP est activé sur votre site Web et que vous souhaitez utiliser Web Worker (useWebWorker : true), veuillez ajouter ce qui suit à l'en-tête de réponse content-security-policy: script-src 'self' blob: https://cdn.jsdelivr.net

blob: sert à charger le script Web Worker
https://cdn.jsdelivr.net permet d'importer cette bibliothèque depuis CDN dans le script Web Worker. Si vous ne souhaitez pas charger cette bibliothèque depuis CDN, vous pouvez définir l'URL de votre bibliothèque auto-hébergée dans options.libURL .

Contribution

fork le dépôt et git le clone
exécutez npm run watch # il surveillera le changement de code dans le dossier lib/ et générera js dans le dossier dist/
ajouter/mettre à jour le code dans le dossier lib/
essayez le code en ouvrant example/development.html qui chargera le js dans le dossier dist/
ajouter/mettre à jour le test dans le dossier test/
npm run test
pousser vers votre dépôt forké sur github
faire une pull request à la branche dev de ce dépôt

Développer