browser image compression
v2.0.2
وحدة جافا سكريبت التي سيتم تشغيلها في متصفح الويب لضغط الصور.
افتح https://donaldcwl.github.io/browser-image-compression/example/basic.html
أو تحقق من مجلد "المثال" في هذا الريبو
< 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 آي إي / إيدج | فايرفوكس | الكروم | سفاري | iOS سفاري | الأوبرا |
|---|---|---|---|---|---|
| IE10، IE11، إيدج | الإصدارين الأخيرين | الإصدارين الأخيرين | الإصدارين الأخيرين | الإصدارين الأخيرين | الإصدارين الأخيرين |
تستخدم هذه المكتبة ميزات 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 لمعرفة توافق المتصفح.
يحتاج المتصفح إلى دعم واجهة برمجة التطبيقات "OffscreenCanvas" للاستفادة من الضغط غير المحظور. إذا كان المتصفح لا يدعم واجهة برمجة التطبيقات "OffscreenCanvas"، فسيتم استخدام الموضوع الرئيسي بدلاً من ذلك. راجع https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility للتعرف على توافق المتصفح مع واجهة برمجة التطبيقات "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
