browser image compression
v2.0.2
画像圧縮のために Web ブラウザーで実行される 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 フォルダーからダウンロードできます。
あるいは、delivrjs のような CDN を使用することもできます。
< 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 つのバージョン |
このライブラリは、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 を参照してください。
ノンブロッキング圧縮を利用するには、ブラウザが「OffscreenCanvas」API をサポートしている必要があります。ブラウザが「OffscreenCanvas」API をサポートしていない場合は、代わりにメインスレッドが使用されます。 「OffscreenCanvas」API のブラウザ互換性については、https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility を参照してください。
Typescript 定義はパッケージに含まれており、 package.jsonのtypesセクションで参照されます。
Web サイトで CSP が有効になっており、Web Worker (useWebWorker: true) を使用する場合は、応答ヘッダーにcontent-security-policy: script-src 'self' blob: https://cdn.jsdelivr.netを追加してください。
blob: Web Worker スクリプトをロードするためのものですhttps://cdn.jsdelivr.net 、Web Worker スクリプト内の CDN からこのライブラリをインポートするためのものです。このライブラリを CDN からロードしたくない場合は、 options.libURLでセルフホスト ライブラリの URL を設定できます。 npm run watch # lib/フォルダー内のコード変更を監視し、dist/フォルダーにjsを生成しますnpm run test
