browser image compression
v2.0.2
โมดูล Javascript ที่จะรันในเว็บเบราว์เซอร์สำหรับการบีบอัดภาพ
เปิด https://donaldcwl.github.io/browser-image-compression/example/basic.html
หรือตรวจสอบโฟลเดอร์ "ตัวอย่าง" ใน repo นี้
< 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 หรือเส้นด้าย
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
หรือคุณสามารถใช้ CDN เช่น delivrjs:
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/browser-image-compression.js " > </ script > หากโครงการนี้ช่วยให้คุณลดเวลาในการพัฒนาก็ซื้อกาแฟให้ฉันได้แก้ว :)
(ขับเคลื่อนโดยลาย)
// 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 / ขอบ | ไฟร์ฟอกซ์ | โครเมียม | ซาฟารี | ไอโอเอสซาฟารี | โอเปร่า |
|---|---|---|---|---|---|
| IE10, IE11, ขอบ | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด |
ไลบรารีนี้ใช้คุณสมบัติ ES เช่น Promise API, globalThis หากคุณต้องการรองรับเบราว์เซอร์ที่ไม่รองรับฟีเจอร์ ES ใหม่ เช่น IE คุณสามารถรวม core-js polyfill ในโครงการของคุณได้
คุณสามารถรวมสคริปต์ต่อไปนี้เพื่อโหลด core-js polyfill:
< 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 สำหรับความเข้ากันได้ของเบราว์เซอร์
เบราว์เซอร์ต้องรองรับ API "OffscreenCanvas" เพื่อใช้ประโยชน์จากการบีบอัดแบบไม่บล็อก หากเบราว์เซอร์ไม่รองรับ API "OffscreenCanvas" จะใช้เธรดหลักแทน ดู https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility สำหรับความเข้ากันได้ของเบราว์เซอร์ของ API "OffscreenCanvas"
คำจำกัดความของ typescript จะรวมอยู่ในแพ็คเกจ & มีการอ้างอิงในส่วน types ของ package.json
หากเว็บไซต์ของคุณเปิดใช้งาน CSP และคุณต้องการใช้ Web Worker (useWebWorker: true) โปรดเพิ่มสิ่งต่อไปนี้ในส่วนหัวการตอบกลับ content-security-policy: script-src 'self' blob: https://cdn.jsdelivr.net
blob: ใช้สำหรับโหลดสคริปต์ Web Workerhttps://cdn.jsdelivr.net ใช้สำหรับนำเข้าไลบรารีนี้จาก CDN ภายในสคริปต์ Web Worker หากคุณไม่ต้องการโหลดไลบรารีนี้จาก CDN คุณสามารถตั้งค่า URL ไลบรารีที่โฮสต์ด้วยตนเองได้ใน options.libURL npm run watch # มันจะดูการเปลี่ยนแปลงโค้ดใน lib/ โฟลเดอร์ และสร้าง js ใน dist/ โฟลเดอร์npm run test
