browser image compression 다운로드 - browser image compression 소스 코드 다운로드

브라우저 이미지 압축

이미지 압축을 위해 웹 브라우저에서 실행되는 Javascript 모듈입니다.

특징

대역폭을 절약하기 위해 애플리케이션 서버에 업로드하기 전에 해상도 나 저장 크기를 줄여 jpeg, png, webp 및 bmp 이미지를 압축하는 데 이 모듈을 사용할 수 있습니다.
멀티 스레드 (웹 작업자) 비차단 압축은 옵션을 통해 지원됩니다.

데모/예

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

}

Promise.then().catch() 구문:

펼치려면 클릭하세요.

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

설치 중

ES 모듈로 사용:

npm이나 Yarn을 통해 설치할 수 있습니다.

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

 import imageCompression from 'browser-image-compression' ;

(React, Angular, Vue 등과 같은 프레임워크에서 사용할 수 있음)

(webpack 및 롤업과 같은 번들러와 함께 작동)

(또는) UMD js 파일을 로드합니다.

dist 폴더에서 imageCompression을 다운로드할 수 있습니다.

또는 delivrjs와 같은 CDN을 사용할 수 있습니다.

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

지원하다

이 프로젝트가 개발 시간을 단축하는데 도움이 된다면 커피 한 잔 사주시면 됩니다 :)

(스트라이프에 의해 구동)

API

주요 기능

 // 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 / 엣지	파이어폭스	크롬	원정 여행	iOS 사파리	오페라
IE10, IE11, 엣지	최근 2개 버전	최근 2개 버전	최근 2개 버전	최근 2개 버전	최근 2개 버전

IE 지원

이 라이브러리는 Promise API, globalThis와 같은 ES 기능을 사용합니다. IE와 같은 새로운 ES 기능을 지원하지 않는 브라우저를 지원해야 하는 경우. 프로젝트에 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를 참조하세요.

Web Worker에서 작동하기 위한 압축에 대한 설명

비차단 압축을 활용하려면 브라우저가 "OffscreenCanvas" API를 지원해야 합니다. 브라우저가 "OffscreenCanvas" API를 지원하지 않으면 메인 스레드가 대신 사용됩니다. "OffscreenCanvas" API의 브라우저 호환성은 https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility를 참조하세요.

Typescript 유형 정의

Typescript 정의는 패키지에 포함되어 있으며 package.json 의 types 섹션에서 참조됩니다.

콘텐츠 보안 정책(CSP)에 대한 참고 사항

웹 사이트에 CSP가 활성화되어 있고 Web Worker(useWebWorker: true)를 사용하려는 경우 응답 헤더 content-security-policy: script-src 'self' blob: https://cdn.jsdelivr.net 에 다음을 추가하세요.

blob: 웹 작업자 스크립트를 로드하기 위한 것입니다.
https://cdn.jsdelivr.net 은 Web Worker 스크립트 내부의 CDN에서 이 라이브러리를 가져오기 위한 것입니다. CDN에서 이 라이브러리를 로드하지 않으려면 options.libURL 에서 자체 호스팅 라이브러리 URL을 설정할 수 있습니다.