Descarga browser image compression - browser image compression Descarga del código fuente

Compresión de imágenes del navegador

Módulo Javascript que se ejecutará en el navegador web para la compresión de imágenes.

Características

Puede utilizar este módulo para comprimir imágenes jpeg, png, webp y bmp reduciendo la resolución o el tamaño de almacenamiento antes de cargarlas en el servidor de aplicaciones para ahorrar ancho de banda.
La compresión sin bloqueo de subprocesos múltiples (trabajador web) se admite a través de opciones.

Demostración/Ejemplo

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

o consulte la carpeta "ejemplo" en este repositorio

Uso

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

sintaxis de espera asíncrona:

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

}

Sintaxis de Promise.then().catch():

Haga clic para ampliar

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

Instalación

Usar como módulo ES:

Puedes instalarlo a través de npm o hilo.

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

 import imageCompression from 'browser-image-compression' ;

(se puede utilizar en marcos como React, Angular, Vue, etc.)

(trabajar con paquetes como webpack y rollup)

(o) Cargue el archivo UMD js:

Puede descargar imageCompression desde la carpeta dist.

Alternativamente, puedes usar una CDN como delivrjs:

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

Apoyo

Si este proyecto te ayuda a reducir el tiempo de desarrollo, puedes invitarme a una taza de café :)

(Desarrollado por Stripe)

API

Función principal

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

Advertencia

Cada navegador limita el tamaño máximo de un objeto Canvas del navegador.
Entonces, cambiamos el tamaño de la imagen a un tamaño inferior al máximo que restringe cada navegador.
(Sin embargo, la proportion/ratio de la imagen permanece).

Abortar/Cancelar compresión

Para utilizar esta función, verifique la compatibilidad del navegador: 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 ) ;
}

Función auxiliar

Solo para usuarios avanzados, la mayoría de los usuarios no necesitarán utilizar las funciones auxiliares.

 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

Soporte de navegadores

Es decir, borde	Firefox	Cromo	Safari	Safari en iOS	Ópera
IE10, IE11, borde	últimas 2 versiones	últimas 2 versiones	últimas 2 versiones	últimas 2 versiones	últimas 2 versiones

Soporte de Internet Explorer

Esta biblioteca utiliza funciones de ES como Promise API, globalThis. Si necesita admitir navegadores que no admiten nuevas funciones de ES como IE. Puede incluir el polyfill core-js en su proyecto.

Puede incluir el siguiente script para cargar el polyfill core-js:

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

Soporte web

La compresión webp es compatible con los principales navegadores. Consulte https://caniuse.com/mdn-api_offscreencanvas_converttoblob_option_type_parameter_webp para conocer la compatibilidad del navegador.

Comentarios para que la compresión funcione en Web Worker

El navegador debe ser compatible con la API "OffscreenCanvas" para poder aprovechar la compresión sin bloqueo. Si el navegador no admite la API "OffscreenCanvas", se utiliza el hilo principal. Consulte https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility para conocer la compatibilidad del navegador con la API "OffscreenCanvas".

Definiciones de tipos de mecanografiado

Las definiciones de mecanografiado se incluyen en el paquete y se hace referencia a ellas en la sección de types de package.json

Observaciones sobre la política de seguridad de contenido (CSP)

Si su sitio web tiene CSP habilitado y desea utilizar Web Worker (useWebWorker: true), agregue lo siguiente al encabezado de respuesta content-security-policy: script-src 'self' blob: https://cdn.jsdelivr.net

blob: es para cargar el script de Web Worker
https://cdn.jsdelivr.net sirve para importar esta biblioteca desde CDN dentro del script Web Worker. Si no desea cargar esta biblioteca desde CDN, puede configurar la URL de su biblioteca autohospedada en options.libURL .

Contribución

bifurca el repositorio y clonalo
ejecute npm run watch # observará el cambio de código en la carpeta lib/ y generará js en la carpeta dist/
agregar/actualizar código en la carpeta lib/
Pruebe el código abriendo example/development.html que cargará el js en la carpeta dist/
agregar/actualizar prueba en prueba/carpeta
npm run test
empuja a tu repositorio bifurcado en github
hacer una solicitud de extracción a la rama de desarrollo de este repositorio

Expandir