browser image compression Download - browser image compression download do código-fonte

Compressão de imagem do navegador

Módulo Javascript a ser executado no navegador web para compactação de imagens.

Características

Você pode usar este módulo para compactar imagens jpeg, png, webp e bmp, reduzindo a resolução ou o tamanho de armazenamento antes de fazer upload para o servidor de aplicativos para economizar largura de banda.
A compactação sem bloqueio multithread (web trabalhador) é suportada por meio de opções.

Demonstração/Exemplo

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

ou verifique a pasta "exemplo" neste repositório

Uso

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

sintaxe de espera assí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 ) ;
  }

}

Sintaxe Promise.then().catch():

Clique para expandir

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

Instalando

Use como módulo ES:

Você pode instalá-lo via npm ou fio

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

 import imageCompression from 'browser-image-compression' ;

(pode ser usado em frameworks como React, Angular, Vue etc)

(trabalhar com bundlers como webpack e rollup)

(ou) Carregue o arquivo UMD js:

Você pode baixar imageCompression da pasta dist.

Alternativamente, você pode usar um CDN como delivrjs:

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

Apoiar

Se este projeto ajudar você a reduzir o tempo de desenvolvimento, você pode me pagar uma xícara de café :)

(desenvolvido por Stripe)

API

Função 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 >

Advertência

Cada navegador limita o tamanho máximo de um objeto Canvas do navegador.
Assim, redimensionamos a imagem para um tamanho menor que o tamanho máximo que cada navegador restringe.
(No entanto, a proportion/ratio da imagem permanece.)

Abortar/Cancelar compactação

Para usar este recurso, verifique a compatibilidade do 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 ) ;
}

Função auxiliar

apenas para usuários avançados, a maioria dos usuários não precisará usar as funções 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

Suporte a navegadores

IE/Edge	Raposa de fogo	Cromo	Safári	Safári iOS	Ópera
IE10, IE11, Borda	últimas 2 versões	últimas 2 versões	últimas 2 versões	últimas 2 versões	últimas 2 versões

Suporte para IE

Esta biblioteca usa recursos ES como Promise API, globalThis. Se você precisar oferecer suporte a navegadores que não suportam novos recursos do ES, como o IE. Você pode incluir o polyfill core-js em seu projeto.

Você pode incluir o seguinte script para carregar o polyfill core-js:

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

Suporte web

A compactação webp é compatível com os principais navegadores. Consulte https://caniuse.com/mdn-api_offscreencanvas_converttoblob_option_type_parameter_webp para compatibilidade do navegador.

Comentários para que a compactação funcione no Web Worker

O navegador precisa oferecer suporte à API "OffscreenCanvas" para aproveitar as vantagens da compactação sem bloqueio. Se o navegador não suportar a API "OffscreenCanvas", o thread principal será usado. Consulte https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility para compatibilidade do navegador da API "OffscreenCanvas".

Definições de tipo de texto digitado

As definições de TypeScript estão incluídas no pacote e referenciadas na seção de types do package.json

Observações sobre a Política de Segurança de Conteúdo (CSP)

Se o seu site tiver CSP habilitado e você quiser usar o Web Worker (useWebWorker: true), adicione o seguinte ao cabeçalho de resposta content-security-policy: script-src 'self' blob: https://cdn.jsdelivr.net

blob: serve para carregar o script Web Worker
https://cdn.jsdelivr.net serve para importar esta biblioteca do CDN dentro do script Web Worker. Se não quiser carregar esta biblioteca do CDN, você pode definir o URL da sua biblioteca auto-hospedada em options.libURL .

Contribuição

bifurque o repositório e git clone-o
execute npm run watch # ele observará a mudança de código na pasta lib/ e gerará js na pasta dist/
adicionar/atualizar código na pasta lib/
experimente o código abrindo example/development.html que carregará o js na pasta dist/
adicionar/atualizar teste na pasta test/
npm run test
push para seu repositório bifurcado no github
faça uma solicitação pull para o branch dev deste repositório

Expandir