- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 | - - - - - - - - - - - - - - - - - - - - - - - - - - - -6x - - -36x -36x - - - -8x -8x - - -6x - -6x - -6x - - -6x - -6x - - -6x - -6x - - -6x -6x -6x -6x - -6x - -6x - -6x -6x - -6x -6x - - - - -6x - -5x -5x - - -1x -1x -1x - - -1x -1x -2x -2x - - -2x - -2x - -2x -2x - -2x - -2x - -2x - -2x - - -1x -1x -1x -1x -1x - -1x -1x - - | import {
- canvasToFile,
- cleanupCanvasMemory,
- drawFileInCanvas,
- followExifOrientation,
- getExifOrientation,
- getNewCanvasAndCtx,
- handleMaxWidthOrHeight,
- isAutoOrientationInBrowser
-} from './utils'
-
-/**
- * Compress an image file.
- *
- * @param {File} file
- * @param {Object} options
- * @param {number} [options.maxSizeMB=Number.POSITIVE_INFINITY]
- * @param {number} [options.maxWidthOrHeight=undefined]
- * @param {boolean} [options.useWebWorker=false]
- * @param {number} [options.maxIteration=10]
- * @param {number} [options.exifOrientation] - default to be the exif orientation from the image file
- * @param {Function} [options.onProgress] - a function takes one progress argument (progress from 0 to 100)
- * @param {string} [options.fileType] - default to be the original mime type from the image file
- * @param {number} [options.initialQuality=1.0]
- * @param {number} previousProgress - for internal try catch rerunning start from previous progress
- * @returns {Promise<File | Blob>}
- */
-export default async function compress (file, options, previousProgress = 0) {
- let progress = previousProgress
-
- function incProgress (inc = 5) {
- progress += inc
- options.onProgress(Math.min(progress, 100))
- }
-
- function setProgress (p) {
- progress = Math.min(Math.max(p, progress), 100)
- options.onProgress(progress)
- }
-
- let remainingTrials = options.maxIteration || 10
-
- const maxSizeByte = options.maxSizeMB * 1024 * 1024
-
- incProgress()
-
- // drawFileInCanvas
- let [img, origCanvas] = await drawFileInCanvas(file)
-
- incProgress()
-
- // handleMaxWidthOrHeight
- const maxWidthOrHeightFixedCanvas = handleMaxWidthOrHeight(origCanvas, options)
-
- incProgress()
-
- // exifOrientation
- const exifOrientation = options.exifOrientation || await getExifOrientation(file)
- incProgress()
- const orientationFixedCanvas = (await isAutoOrientationInBrowser()) ? maxWidthOrHeightFixedCanvas : followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation)
- incProgress()
-
- let quality = options.initialQuality || 1.0
-
- const outputFileType = options.fileType || file.type
-
- let tempFile = await canvasToFile(orientationFixedCanvas, outputFileType, file.name, file.lastModified, quality)
- incProgress()
-
- const origExceedMaxSize = tempFile.size > maxSizeByte
- const sizeBecomeLarger = tempFile.size > file.size
- // console.log('original file size', file.size)
- // console.log('current file size', tempFile.size)
-
- // check if we need to compress or resize
- if (!origExceedMaxSize && !sizeBecomeLarger) {
- // no need to compress
- setProgress(100)
- return tempFile
- }
-
- const sourceSize = file.size
- const renderedSize = tempFile.size
- let currentSize = renderedSize
- let compressedFile
- let newCanvas, ctx
- let canvas = orientationFixedCanvas
- while (remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
- const newWidth = origExceedMaxSize ? canvas.width * 0.95 : canvas.width
- const newHeight = origExceedMaxSize ? canvas.height * 0.95 : canvas.height;
- // console.log('current width', newWidth);
- // console.log('current height', newHeight);
- [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
-
- ctx.drawImage(canvas, 0, 0, newWidth, newHeight)
-
- quality *= 0.95
- compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality)
-
- cleanupCanvasMemory(canvas)
-
- canvas = newCanvas
-
- currentSize = compressedFile.size
- // console.log('currentSize', currentSize)
- setProgress(Math.min(99, Math.floor((renderedSize - currentSize) / (renderedSize - maxSizeByte) * 100)))
- }
-
- cleanupCanvasMemory(canvas)
- cleanupCanvasMemory(newCanvas)
- cleanupCanvasMemory(maxWidthOrHeightFixedCanvas)
- cleanupCanvasMemory(orientationFixedCanvas)
- cleanupCanvasMemory(origCanvas)
-
- setProgress(100)
- return compressedFile
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -9x - - -9x -9x -9x -9x -9x -44x -44x - - - - -9x -2x -7x -1x - - - -6x - - - - - - - -6x - - - - - - - - - - - -6x - - -6x -6x -6x - - -6x - - -1x -1x -1x -1x -1x -1x -1x - -1x -1x -1x -1x -1x - - - | import compress from './image-compression'
-import {
- canvasToFile,
- drawFileInCanvas,
- drawImageInCanvas,
- getDataUrlFromFile,
- getFilefromDataUrl,
- loadImage,
- getExifOrientation,
- handleMaxWidthOrHeight,
- followExifOrientation,
- CustomFile,
- cleanupCanvasMemory,
- isAutoOrientationInBrowser
-} from './utils'
-import { compressOnWebWorker } from './web-worker'
-
-/**
- * Compress an image file.
- *
- * @param {File} file
- * @param {Object} options - { maxSizeMB=Number.POSITIVE_INFINITY, maxWidthOrHeight, useWebWorker=false, maxIteration = 10, exifOrientation, fileType }
- * @param {number} [options.maxSizeMB=Number.POSITIVE_INFINITY]
- * @param {number} [options.maxWidthOrHeight=undefined]
- * @param {boolean} [options.useWebWorker=false]
- * @param {number} [options.maxIteration=10]
- * @param {number} [options.exifOrientation] - default to be the exif orientation from the image file
- * @param {Function} [options.onProgress] - a function takes one progress argument (progress from 0 to 100)
- * @param {string} [options.fileType] - default to be the original mime type from the image file
- * @returns {Promise<File | Blob>}
- */
-async function imageCompression (file, options) {
-
- let compressedFile
- let progress = 0
- let onProgress
-
- options.maxSizeMB = options.maxSizeMB || Number.POSITIVE_INFINITY
- const useWebWorker = typeof options.useWebWorker === 'boolean' ? options.useWebWorker : true
- delete options.useWebWorker
- onProgress = options.onProgress
- options.onProgress = (aProgress) => {
- progress = aProgress
- Iif (typeof onProgress === 'function') {
- onProgress(progress)
- }
- }
-
- if (!(file instanceof Blob || file instanceof CustomFile)) {
- throw new Error('The file given is not an instance of Blob or File')
- } else if (!/^image/.test(file.type)) {
- throw new Error('The file given is not an image')
- }
-
- // try run in web worker, fall back to run in main thread
- const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope
-
- // if ((useWebWorker && typeof Worker === 'function') || inWebWorker) {
- // console.log('run compression in web worker')
- // } else {
- // console.log('run compression in main thread')
- // }
-
- Iif (useWebWorker && typeof Worker === 'function' && !inWebWorker) {
- try {
- // console.log(1)
- // "compressOnWebWorker" is kind of like a recursion to call "imageCompression" again inside web worker
- compressedFile = await compressOnWebWorker(file, options)
- } catch (e) {
- // console.warn('Run compression in web worker failed:', e, ', fall back to main thread')
- // console.log(1.5)
- compressedFile = await compress(file, options)
- }
- } else {
- // console.log(2)
- compressedFile = await compress(file, options)
- }
-
- try {
- compressedFile.name = file.name
- compressedFile.lastModified = file.lastModified
- } catch (e) {}
-
- return compressedFile
-}
-
-imageCompression.getDataUrlFromFile = getDataUrlFromFile
-imageCompression.getFilefromDataUrl = getFilefromDataUrl
-imageCompression.loadImage = loadImage
-imageCompression.drawImageInCanvas = drawImageInCanvas
-imageCompression.drawFileInCanvas = drawFileInCanvas
-imageCompression.canvasToFile = canvasToFile
-imageCompression.getExifOrientation = getExifOrientation
-
-imageCompression.handleMaxWidthOrHeight = handleMaxWidthOrHeight
-imageCompression.followExifOrientation = followExifOrientation
-imageCompression.cleanupCanvasMemory = cleanupCanvasMemory
-imageCompression.isAutoOrientationInBrowser = isAutoOrientationInBrowser
-imageCompression.version = '1.0.14'
-
-export default imageCompression
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 | - - - - - - - - - - - - - - - - - - - - - - - - - - - -6x - - -36x -36x - - - -8x -8x - - -6x - -6x - -6x - - -6x - -6x - - -6x - -6x - - -6x -6x -6x -6x - -6x - -6x - -6x -6x - -6x -6x - - - - -6x - -5x -5x - - -1x -1x -1x - - -1x -1x -2x -2x - - -2x - -2x - -2x -2x - -2x - -2x - -2x - -2x - - -1x -1x -1x -1x -1x - -1x -1x - - | import {
- canvasToFile,
- cleanupCanvasMemory,
- drawFileInCanvas,
- followExifOrientation,
- getExifOrientation,
- getNewCanvasAndCtx,
- handleMaxWidthOrHeight,
- isAutoOrientationInBrowser
-} from './utils'
-
-/**
- * Compress an image file.
- *
- * @param {File} file
- * @param {Object} options
- * @param {number} [options.maxSizeMB=Number.POSITIVE_INFINITY]
- * @param {number} [options.maxWidthOrHeight=undefined]
- * @param {boolean} [options.useWebWorker=false]
- * @param {number} [options.maxIteration=10]
- * @param {number} [options.exifOrientation] - default to be the exif orientation from the image file
- * @param {Function} [options.onProgress] - a function takes one progress argument (progress from 0 to 100)
- * @param {string} [options.fileType] - default to be the original mime type from the image file
- * @param {number} [options.initialQuality=1.0]
- * @param {number} previousProgress - for internal try catch rerunning start from previous progress
- * @returns {Promise<File | Blob>}
- */
-export default async function compress (file, options, previousProgress = 0) {
- let progress = previousProgress
-
- function incProgress (inc = 5) {
- progress += inc
- options.onProgress(Math.min(progress, 100))
- }
-
- function setProgress (p) {
- progress = Math.min(Math.max(p, progress), 100)
- options.onProgress(progress)
- }
-
- let remainingTrials = options.maxIteration || 10
-
- const maxSizeByte = options.maxSizeMB * 1024 * 1024
-
- incProgress()
-
- // drawFileInCanvas
- let [img, origCanvas] = await drawFileInCanvas(file)
-
- incProgress()
-
- // handleMaxWidthOrHeight
- const maxWidthOrHeightFixedCanvas = handleMaxWidthOrHeight(origCanvas, options)
-
- incProgress()
-
- // exifOrientation
- const exifOrientation = options.exifOrientation || await getExifOrientation(file)
- incProgress()
- const orientationFixedCanvas = (await isAutoOrientationInBrowser()) ? maxWidthOrHeightFixedCanvas : followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation)
- incProgress()
-
- let quality = options.initialQuality || 1.0
-
- const outputFileType = options.fileType || file.type
-
- let tempFile = await canvasToFile(orientationFixedCanvas, outputFileType, file.name, file.lastModified, quality)
- incProgress()
-
- const origExceedMaxSize = tempFile.size > maxSizeByte
- const sizeBecomeLarger = tempFile.size > file.size
- // console.log('original file size', file.size)
- // console.log('current file size', tempFile.size)
-
- // check if we need to compress or resize
- if (!origExceedMaxSize && !sizeBecomeLarger) {
- // no need to compress
- setProgress(100)
- return tempFile
- }
-
- const sourceSize = file.size
- const renderedSize = tempFile.size
- let currentSize = renderedSize
- let compressedFile
- let newCanvas, ctx
- let canvas = orientationFixedCanvas
- while (remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
- const newWidth = origExceedMaxSize ? canvas.width * 0.95 : canvas.width
- const newHeight = origExceedMaxSize ? canvas.height * 0.95 : canvas.height;
- // console.log('current width', newWidth);
- // console.log('current height', newHeight);
- [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
-
- ctx.drawImage(canvas, 0, 0, newWidth, newHeight)
-
- quality *= 0.95
- compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality)
-
- cleanupCanvasMemory(canvas)
-
- canvas = newCanvas
-
- currentSize = compressedFile.size
- // console.log('currentSize', currentSize)
- setProgress(Math.min(99, Math.floor((renderedSize - currentSize) / (renderedSize - maxSizeByte) * 100)))
- }
-
- cleanupCanvasMemory(canvas)
- cleanupCanvasMemory(newCanvas)
- cleanupCanvasMemory(maxWidthOrHeightFixedCanvas)
- cleanupCanvasMemory(orientationFixedCanvas)
- cleanupCanvasMemory(origCanvas)
-
- setProgress(100)
- return compressedFile
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -9x - - -9x -9x -9x -9x -9x -44x -44x - - - - -9x -2x -7x -1x - - - -6x - - - - - - - -6x - - - - - - - - - - - -6x - - -6x -6x -6x - - -6x - - -1x -1x -1x -1x -1x -1x -1x - -1x -1x -1x -1x -1x - - - | import compress from './image-compression'
-import {
- canvasToFile,
- drawFileInCanvas,
- drawImageInCanvas,
- getDataUrlFromFile,
- getFilefromDataUrl,
- loadImage,
- getExifOrientation,
- handleMaxWidthOrHeight,
- followExifOrientation,
- CustomFile,
- cleanupCanvasMemory,
- isAutoOrientationInBrowser
-} from './utils'
-import { compressOnWebWorker } from './web-worker'
-
-/**
- * Compress an image file.
- *
- * @param {File} file
- * @param {Object} options - { maxSizeMB=Number.POSITIVE_INFINITY, maxWidthOrHeight, useWebWorker=false, maxIteration = 10, exifOrientation, fileType }
- * @param {number} [options.maxSizeMB=Number.POSITIVE_INFINITY]
- * @param {number} [options.maxWidthOrHeight=undefined]
- * @param {boolean} [options.useWebWorker=false]
- * @param {number} [options.maxIteration=10]
- * @param {number} [options.exifOrientation] - default to be the exif orientation from the image file
- * @param {Function} [options.onProgress] - a function takes one progress argument (progress from 0 to 100)
- * @param {string} [options.fileType] - default to be the original mime type from the image file
- * @returns {Promise<File | Blob>}
- */
-async function imageCompression (file, options) {
-
- let compressedFile
- let progress = 0
- let onProgress
-
- options.maxSizeMB = options.maxSizeMB || Number.POSITIVE_INFINITY
- const useWebWorker = typeof options.useWebWorker === 'boolean' ? options.useWebWorker : true
- delete options.useWebWorker
- onProgress = options.onProgress
- options.onProgress = (aProgress) => {
- progress = aProgress
- Iif (typeof onProgress === 'function') {
- onProgress(progress)
- }
- }
-
- if (!(file instanceof Blob || file instanceof CustomFile)) {
- throw new Error('The file given is not an instance of Blob or File')
- } else if (!/^image/.test(file.type)) {
- throw new Error('The file given is not an image')
- }
-
- // try run in web worker, fall back to run in main thread
- const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope
-
- // if ((useWebWorker && typeof Worker === 'function') || inWebWorker) {
- // console.log('run compression in web worker')
- // } else {
- // console.log('run compression in main thread')
- // }
-
- Iif (useWebWorker && typeof Worker === 'function' && !inWebWorker) {
- try {
- // console.log(1)
- // "compressOnWebWorker" is kind of like a recursion to call "imageCompression" again inside web worker
- compressedFile = await compressOnWebWorker(file, options)
- } catch (e) {
- // console.warn('Run compression in web worker failed:', e, ', fall back to main thread')
- // console.log(1.5)
- compressedFile = await compress(file, options)
- }
- } else {
- // console.log(2)
- compressedFile = await compress(file, options)
- }
-
- try {
- compressedFile.name = file.name
- compressedFile.lastModified = file.lastModified
- } catch (e) {}
-
- return compressedFile
-}
-
-imageCompression.getDataUrlFromFile = getDataUrlFromFile
-imageCompression.getFilefromDataUrl = getFilefromDataUrl
-imageCompression.loadImage = loadImage
-imageCompression.drawImageInCanvas = drawImageInCanvas
-imageCompression.drawFileInCanvas = drawFileInCanvas
-imageCompression.canvasToFile = canvasToFile
-imageCompression.getExifOrientation = getExifOrientation
-
-imageCompression.handleMaxWidthOrHeight = handleMaxWidthOrHeight
-imageCompression.followExifOrientation = followExifOrientation
-imageCompression.cleanupCanvasMemory = cleanupCanvasMemory
-imageCompression.isAutoOrientationInBrowser = isAutoOrientationInBrowser
-imageCompression.version = '1.0.14'
-
-export default imageCompression
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 | - -1x - - -1x -1x -1x - - - - -6x -5x - - - - -1x - - - - - -1x - -1x -1x -1x -1x - - -1x -1x - - - - - - - - - -15x -15x -15x -15x -15x - - - - - - - - - - - - -9x -9x -9x -9x -9x -9x -9x -11249118x - -9x -9x -9x -9x - - - - - - - - - - - - - - - - - - - - - - - -15x -15x -15x -15x -15x - - - - - - - - - - -14x -14x -14x - - - - - - - - - - -13x -13x - -13x -13x - -13x -13x - - - - - - - - - - - - - - -9x -3x -3x -3x -3x -3x -3x -6x - - - - - - - -6x -6x - -9x - - - - - - - - - - - -1x -1x -1x -1x -1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x -1x - - - - - - - - - - -6x -6x -6x - -6x - -6x - - -6x -4x -4x -2x -2x - -2x -2x - -4x - -4x - - -6x - - - - - - - - - - - -6x -6x - -6x - - -6x - - - -6x -6x - - - -6x - - - - - - - - - - - - - - - - - - - - - - -6x - - -6x - -6x - -6x - - - - - - - - - - - -26x -26x - - - - - -26x -26x - -26x -26x - - -26x - - - - - - - - - - -18x -18x - - -1x - -1x - - - - - - | import UPNG from './UPNG' - -const isBrowser = typeof window !== 'undefined' // change browser environment to support SSR - -// add support for cordova-plugin-file -const moduleMapper = isBrowser && window.cordova && window.cordova.require && window.cordova.require('cordova/modulemapper') -export const CustomFile = isBrowser && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'File')) || File) -export const CustomFileReader = isBrowser && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'FileReader')) || FileReader) - -// Check if browser supports automatic image orientation -// see https://github.com/blueimp/JavaScript-Load-Image/blob/1e4df707821a0afcc11ea0720ee403b8759f3881/js/load-image-orientation.js#L37-L53 -export async function isAutoOrientationInBrowser() { - if (isAutoOrientationInBrowser.result !== undefined) - return isAutoOrientationInBrowser.result - - // black 2x1 JPEG, with the following meta information set: - // EXIF Orientation: 6 (Rotated 90° CCW) - const testImageURL = - 'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' + - 'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' + - 'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' + - 'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' + - 'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' + - 'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==' - const testImageFile = await getFilefromDataUrl(testImageURL, 'test.jpg', Date.now()) - - const testImageCanvas = (await drawFileInCanvas(testImageFile))[1] - const testImageFile2 = await canvasToFile(testImageCanvas, testImageFile.type, testImageFile.name, testImageFile.lastModified) - cleanupCanvasMemory(testImageCanvas) - const img = (await drawFileInCanvas(testImageFile2))[0] - // console.log('img', img.width, img.height) - - isAutoOrientationInBrowser.result = img.width === 1 && img.height === 2 - return isAutoOrientationInBrowser.result -} - -/** - * getDataUrlFromFile - * - * @param {File | Blob} file - * @returns {Promise<string>} - */ -export function getDataUrlFromFile (file) { - return new Promise((resolve, reject) => { - const reader = new CustomFileReader() - reader.onload = () => resolve(reader.result) - reader.onerror = (e) => reject(e) - reader.readAsDataURL(file) - }) -} - -/** - * getFilefromDataUrl - * - * @param {string} dataUrl - * @param {string} filename - * @param {number} [lastModified=Date.now()] - * @returns {Promise<File | Blob>} - */ -export function getFilefromDataUrl (dataUrl, filename, lastModified = Date.now()) { - return new Promise((resolve) => { - const arr = dataUrl.split(',') - const mime = arr[0].match(/:(.*?);/)[1] - const bstr = globalThis.atob(arr[1]) - let n = bstr.length - const u8arr = new Uint8Array(n) - while (n--) { - u8arr[n] = bstr.charCodeAt(n) - } - const file = new Blob([u8arr], { type: mime }) - file.name = filename - file.lastModified = lastModified - resolve(file) - - // Safari has issue with File constructor not being able to POST in FormData - // https://github.com/Donaldcwl/browser-image-compression/issues/8 - // https://bugs.webkit.org/show_bug.cgi?id=165081 - // let file - // try { - // file = new File([u8arr], filename, { type: mime }) // Edge do not support File constructor - // } catch (e) { - // file = new Blob([u8arr], { type: mime }) - // file.name = filename - // file.lastModified = lastModified - // } - // resolve(file) - }) -} - -/** - * loadImage - * - * @param {string} src - * @returns {Promise<HTMLImageElement>} - */ -export function loadImage (src) { - return new Promise((resolve, reject) => { - const img = new Image() - img.onload = () => resolve(img) - img.onerror = (e) => reject(e) - img.src = src - }) -} - -/** - * drawImageInCanvas - * - * @param {HTMLImageElement} img - * @returns {HTMLCanvasElement | OffscreenCanvas} - */ -export function drawImageInCanvas (img) { - const [canvas, ctx] = getNewCanvasAndCtx(img.width, img.height) - ctx.drawImage(img, 0, 0, canvas.width, canvas.height) - return canvas -} - -/** - * drawFileInCanvas - * - * @param {File | Blob} file - * @returns {Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>} - */ -export async function drawFileInCanvas (file) { - let img - try { - img = await createImageBitmap(file) - } catch (e) { - const dataUrl = await getDataUrlFromFile(file) - img = await loadImage(dataUrl) - } - const canvas = drawImageInCanvas(img) - return [img, canvas] -} - -/** - * canvasToFile - * - * @param {HTMLCanvasElement | OffscreenCanvas} canvas - * @param {string} fileType - * @param {string} fileName - * @param {number} fileLastModified - * @param {number} [quality] - * @returns {Promise<File | Blob>} - */ -export async function canvasToFile (canvas, fileType, fileName, fileLastModified, quality = 1) { - let file - if (fileType === 'image/png') { - const ctx = canvas.getContext('2d') - const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data - const png = UPNG.encode([data], canvas.width, canvas.height, 256 * quality) - file = new Blob([png], { type: fileType }) - file.name = fileName - file.lastModified = fileLastModified - } else Iif (typeof OffscreenCanvas === 'function' && canvas instanceof OffscreenCanvas) { // checked on Win Chrome 83, MacOS Chrome 83 - file = await canvas.convertToBlob({ type: fileType, quality }) - file.name = fileName - file.lastModified = fileLastModified - // some browser do not support quality parameter, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob - // } else if (typeof canvas.toBlob === 'function') { - // file = await new Promise(resolve => canvas.toBlob(resolve, fileType, quality)) - } else { // checked on Win Edge 44, Win IE 11, Win Firefox 76, MacOS Firefox 77, MacOS Safari 13.1 - const dataUrl = canvas.toDataURL(fileType, quality) - file = await getFilefromDataUrl(dataUrl, fileName, fileLastModified) - } - return file -} - -/** - * getExifOrientation - * get image exif orientation info - * source: https://stackoverflow.com/a/32490603/10395024 - * - * @param {File | Blob} file - * @returns {Promise<number>} - orientation id, see https://i.stack.imgur.com/VGsAj.gif - */ -export function getExifOrientation (file) { - return new Promise((resolve, reject) => { - const reader = new CustomFileReader() - reader.onload = (e) => { - const view = new DataView(e.target.result) - Eif (view.getUint16(0, false) != 0xFFD8) { - return resolve(-2) - } - const length = view.byteLength - let offset = 2 - while (offset < length) { - if (view.getUint16(offset + 2, false) <= 8) return resolve(-1) - const marker = view.getUint16(offset, false) - offset += 2 - if (marker == 0xFFE1) { - if (view.getUint32(offset += 2, false) != 0x45786966) { - return resolve(-1) - } - - var little = view.getUint16(offset += 6, false) == 0x4949 - offset += view.getUint32(offset + 4, little) - var tags = view.getUint16(offset, little) - offset += 2 - for (var i = 0; i < tags; i++) { - if (view.getUint16(offset + (i * 12), little) == 0x0112) { - return resolve(view.getUint16(offset + (i * 12) + 8, little)) - } - } - } else if ((marker & 0xFF00) != 0xFF00) { - break - } else { - offset += view.getUint16(offset, false) - } - } - return resolve(-1) - } - reader.onerror = (e) => reject(e) - reader.readAsArrayBuffer(file) - }) -} - -/** - * - * @param {HTMLCanvasElement | OffscreenCanvas} canvas - * @param options - * @returns {HTMLCanvasElement | OffscreenCanvas} - */ -export function handleMaxWidthOrHeight (canvas, options) { - const width = canvas.width - const height = canvas.height - const maxWidthOrHeight = options.maxWidthOrHeight - - const needToHandle = isFinite(maxWidthOrHeight) && (width > maxWidthOrHeight || height > maxWidthOrHeight) - - let newCanvas = canvas - let ctx - - if (needToHandle) { - [newCanvas, ctx] = getNewCanvasAndCtx(width, height) - if (width > height) { - newCanvas.width = maxWidthOrHeight - newCanvas.height = (height / width) * maxWidthOrHeight - } else { - newCanvas.width = (width / height) * maxWidthOrHeight - newCanvas.height = maxWidthOrHeight - } - ctx.drawImage(canvas, 0, 0, newCanvas.width, newCanvas.height) - - cleanupCanvasMemory(canvas) - } - - return newCanvas -} - -/** - * followExifOrientation - * source: https://stackoverflow.com/a/40867559/10395024 - * - * @param {HTMLCanvasElement | OffscreenCanvas} canvas - * @param {number} exifOrientation - * @returns {HTMLCanvasElement | OffscreenCanvas} canvas - */ -export function followExifOrientation (canvas, exifOrientation) { - const width = canvas.width - const height = canvas.height - - const [newCanvas, ctx] = getNewCanvasAndCtx(width, height) - - // set proper canvas dimensions before transform & export - Iif (4 < exifOrientation && exifOrientation < 9) { - newCanvas.width = height - newCanvas.height = width - } else { - newCanvas.width = width - newCanvas.height = height - } - - // transform context before drawing image - switch (exifOrientation) { - case 2: - ctx.transform(-1, 0, 0, 1, width, 0) - break - case 3: - ctx.transform(-1, 0, 0, -1, width, height) - break - case 4: - ctx.transform(1, 0, 0, -1, 0, height) - break - case 5: - ctx.transform(0, 1, 1, 0, 0, 0) - break - case 6: - ctx.transform(0, 1, -1, 0, height, 0) - break - case 7: - ctx.transform(0, -1, -1, 0, height, width) - break - case 8: - ctx.transform(0, -1, 1, 0, 0, width) - break - default: - break - } - - ctx.drawImage(canvas, 0, 0, width, height) - - cleanupCanvasMemory(canvas) - - return newCanvas -} - -/** - * get new Canvas and it's context - * @param width - * @param height - * @returns {[HTMLCanvasElement | OffscreenCanvas, CanvasRenderingContext2D]} - */ -export function getNewCanvasAndCtx (width, height) { - let canvas - let ctx - try { - canvas = new OffscreenCanvas(width, height) - ctx = canvas.getContext('2d') - if (ctx === null) { - throw new Error('getContext of OffscreenCanvas returns null') - } - } catch (e) { - canvas = document.createElement('canvas') - ctx = canvas.getContext('2d') - } - canvas.width = width - canvas.height = height - // ctx.fillStyle = '#fff' - // ctx.fillRect(0, 0, width, height) - return [canvas, ctx] -} - -/** - * clear Canvas memory - * @param canvas - * @returns null - */ -export function cleanupCanvasMemory (canvas) { - // garbage clean canvas for safari - // ref: https://bugs.webkit.org/show_bug.cgi?id=195325 - canvas.width = 0 - canvas.height = 0 -} - -Eif (isBrowser) { -// Polyfill for Number.isInteger - Number.isInteger = Number.isInteger || function (value) { - return typeof value === 'number' && - isFinite(value) && - Math.floor(value) === value - } -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 | - - -1x - - - -1x - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import imageCompression from './index'
-import compress from './image-compression'
-
-let cnt = 0
-let imageCompressionLibUrl
-
-function createWorker (f) {
- return new Worker(URL.createObjectURL(new Blob([`(${f})()`])))
-}
-
-const worker = createWorker(() => {
- self.addEventListener('message', async (e) => {
- const { file, id, imageCompressionLibUrl, options } = e.data
- try {
- // console.log('[worker] importScripts', imageCompressionLibUrl)
- importScripts(imageCompressionLibUrl)
- // console.log('[worker] self', self)
- const compressedFile = await imageCompression(file, options)
- self.postMessage({ file: compressedFile, id })
- } catch (e) {
- // console.error('[worker] error', e)
- self.postMessage({ error: e.message, id })
- }
- })
-})
-
-function createSourceObject (str) {
- return URL.createObjectURL(new Blob([str], { type: 'application/javascript' }))
-}
-
-export function compressOnWebWorker (file, options) {
- return new Promise(async (resolve, reject) => {
- if (!imageCompressionLibUrl) {
- imageCompressionLibUrl = createSourceObject(`
- function imageCompression (){return (${imageCompression}).apply(null, arguments)}
-
- imageCompression.getDataUrlFromFile = ${imageCompression.getDataUrlFromFile}
- imageCompression.getFilefromDataUrl = ${imageCompression.getFilefromDataUrl}
- imageCompression.loadImage = ${imageCompression.loadImage}
- imageCompression.drawImageInCanvas = ${imageCompression.drawImageInCanvas}
- imageCompression.drawFileInCanvas = ${imageCompression.drawFileInCanvas}
- imageCompression.canvasToFile = ${imageCompression.canvasToFile}
- imageCompression.getExifOrientation = ${imageCompression.getExifOrientation}
- imageCompression.handleMaxWidthOrHeight = ${imageCompression.handleMaxWidthOrHeight}
- imageCompression.followExifOrientation = ${imageCompression.followExifOrientation}
-
- getDataUrlFromFile = imageCompression.getDataUrlFromFile
- getFilefromDataUrl = imageCompression.getFilefromDataUrl
- loadImage = imageCompression.loadImage
- drawImageInCanvas = imageCompression.drawImageInCanvas
- drawFileInCanvas = imageCompression.drawFileInCanvas
- canvasToFile = imageCompression.canvasToFile
- getExifOrientation = imageCompression.getExifOrientation
- handleMaxWidthOrHeight = imageCompression.handleMaxWidthOrHeight
- followExifOrientation = imageCompression.followExifOrientation
-
- function compress (){return (${compress}).apply(null, arguments)}
- `)
- // imageCompressionLibUrl = new URL('../dist/browser-image-compression.js', window.location.href).href
- }
- let id = cnt++
-
- function handler (e) {
- if (e.data.id === id) {
- worker.removeEventListener('message', handler)
- if (e.data.error) {
- reject(e.data.error)
- }
- resolve(e.data.file)
- }
- }
-
- worker.addEventListener('message', handler)
- worker.postMessage({ file, id, imageCompressionLibUrl, options })
- })
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 | - -1x - - -1x -1x -1x - - - - -6x -5x - - - - -1x - - - - - -1x - -1x -1x -1x -1x - - -1x -1x - - - - - - - - - -15x -15x -15x -15x -15x - - - - - - - - - - - - -9x -9x -9x -9x -9x -9x -9x -11249118x - -9x -9x -9x -9x - - - - - - - - - - - - - - - - - - - - - - - -15x -15x -15x -15x -15x - - - - - - - - - - -14x -14x -14x - - - - - - - - - - -13x -13x - -13x -13x - -13x -13x - - - - - - - - - - - - - - -9x -3x -3x -3x -3x -3x -3x -6x - - - - - - - -6x -6x - -9x - - - - - - - - - - - -1x -1x -1x -1x -1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x -1x - - - - - - - - - - -6x -6x -6x - -6x - -6x - - -6x -4x -4x -2x -2x - -2x -2x - -4x - -4x - - -6x - - - - - - - - - - - -6x -6x - -6x - - -6x - - - -6x -6x - - - -6x - - - - - - - - - - - - - - - - - - - - - - -6x - - -6x - -6x - -6x - - - - - - - - - - - -26x -26x - - - - - -26x -26x - -26x -26x - - -26x - - - - - - - - - - -18x -18x - - -1x - -1x - - - - - - | import UPNG from './UPNG' - -const isBrowser = typeof window !== 'undefined' // change browser environment to support SSR - -// add support for cordova-plugin-file -const moduleMapper = isBrowser && window.cordova && window.cordova.require && window.cordova.require('cordova/modulemapper') -export const CustomFile = isBrowser && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'File')) || File) -export const CustomFileReader = isBrowser && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'FileReader')) || FileReader) - -// Check if browser supports automatic image orientation -// see https://github.com/blueimp/JavaScript-Load-Image/blob/1e4df707821a0afcc11ea0720ee403b8759f3881/js/load-image-orientation.js#L37-L53 -export async function isAutoOrientationInBrowser() { - if (isAutoOrientationInBrowser.result !== undefined) - return isAutoOrientationInBrowser.result - - // black 2x1 JPEG, with the following meta information set: - // EXIF Orientation: 6 (Rotated 90° CCW) - const testImageURL = - 'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' + - 'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' + - 'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' + - 'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' + - 'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' + - 'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==' - const testImageFile = await getFilefromDataUrl(testImageURL, 'test.jpg', Date.now()) - - const testImageCanvas = (await drawFileInCanvas(testImageFile))[1] - const testImageFile2 = await canvasToFile(testImageCanvas, testImageFile.type, testImageFile.name, testImageFile.lastModified) - cleanupCanvasMemory(testImageCanvas) - const img = (await drawFileInCanvas(testImageFile2))[0] - // console.log('img', img.width, img.height) - - isAutoOrientationInBrowser.result = img.width === 1 && img.height === 2 - return isAutoOrientationInBrowser.result -} - -/** - * getDataUrlFromFile - * - * @param {File | Blob} file - * @returns {Promise<string>} - */ -export function getDataUrlFromFile (file) { - return new Promise((resolve, reject) => { - const reader = new CustomFileReader() - reader.onload = () => resolve(reader.result) - reader.onerror = (e) => reject(e) - reader.readAsDataURL(file) - }) -} - -/** - * getFilefromDataUrl - * - * @param {string} dataUrl - * @param {string} filename - * @param {number} [lastModified=Date.now()] - * @returns {Promise<File | Blob>} - */ -export function getFilefromDataUrl (dataUrl, filename, lastModified = Date.now()) { - return new Promise((resolve) => { - const arr = dataUrl.split(',') - const mime = arr[0].match(/:(.*?);/)[1] - const bstr = globalThis.atob(arr[1]) - let n = bstr.length - const u8arr = new Uint8Array(n) - while (n--) { - u8arr[n] = bstr.charCodeAt(n) - } - const file = new Blob([u8arr], { type: mime }) - file.name = filename - file.lastModified = lastModified - resolve(file) - - // Safari has issue with File constructor not being able to POST in FormData - // https://github.com/Donaldcwl/browser-image-compression/issues/8 - // https://bugs.webkit.org/show_bug.cgi?id=165081 - // let file - // try { - // file = new File([u8arr], filename, { type: mime }) // Edge do not support File constructor - // } catch (e) { - // file = new Blob([u8arr], { type: mime }) - // file.name = filename - // file.lastModified = lastModified - // } - // resolve(file) - }) -} - -/** - * loadImage - * - * @param {string} src - * @returns {Promise<HTMLImageElement>} - */ -export function loadImage (src) { - return new Promise((resolve, reject) => { - const img = new Image() - img.onload = () => resolve(img) - img.onerror = (e) => reject(e) - img.src = src - }) -} - -/** - * drawImageInCanvas - * - * @param {HTMLImageElement} img - * @returns {HTMLCanvasElement | OffscreenCanvas} - */ -export function drawImageInCanvas (img) { - const [canvas, ctx] = getNewCanvasAndCtx(img.width, img.height) - ctx.drawImage(img, 0, 0, canvas.width, canvas.height) - return canvas -} - -/** - * drawFileInCanvas - * - * @param {File | Blob} file - * @returns {Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>} - */ -export async function drawFileInCanvas (file) { - let img - try { - img = await createImageBitmap(file) - } catch (e) { - const dataUrl = await getDataUrlFromFile(file) - img = await loadImage(dataUrl) - } - const canvas = drawImageInCanvas(img) - return [img, canvas] -} - -/** - * canvasToFile - * - * @param {HTMLCanvasElement | OffscreenCanvas} canvas - * @param {string} fileType - * @param {string} fileName - * @param {number} fileLastModified - * @param {number} [quality] - * @returns {Promise<File | Blob>} - */ -export async function canvasToFile (canvas, fileType, fileName, fileLastModified, quality = 1) { - let file - if (fileType === 'image/png') { - const ctx = canvas.getContext('2d') - const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data - const png = UPNG.encode([data], canvas.width, canvas.height, 256 * quality) - file = new Blob([png], { type: fileType }) - file.name = fileName - file.lastModified = fileLastModified - } else Iif (typeof OffscreenCanvas === 'function' && canvas instanceof OffscreenCanvas) { // checked on Win Chrome 83, MacOS Chrome 83 - file = await canvas.convertToBlob({ type: fileType, quality }) - file.name = fileName - file.lastModified = fileLastModified - // some browser do not support quality parameter, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob - // } else if (typeof canvas.toBlob === 'function') { - // file = await new Promise(resolve => canvas.toBlob(resolve, fileType, quality)) - } else { // checked on Win Edge 44, Win IE 11, Win Firefox 76, MacOS Firefox 77, MacOS Safari 13.1 - const dataUrl = canvas.toDataURL(fileType, quality) - file = await getFilefromDataUrl(dataUrl, fileName, fileLastModified) - } - return file -} - -/** - * getExifOrientation - * get image exif orientation info - * source: https://stackoverflow.com/a/32490603/10395024 - * - * @param {File | Blob} file - * @returns {Promise<number>} - orientation id, see https://i.stack.imgur.com/VGsAj.gif - */ -export function getExifOrientation (file) { - return new Promise((resolve, reject) => { - const reader = new CustomFileReader() - reader.onload = (e) => { - const view = new DataView(e.target.result) - Eif (view.getUint16(0, false) != 0xFFD8) { - return resolve(-2) - } - const length = view.byteLength - let offset = 2 - while (offset < length) { - if (view.getUint16(offset + 2, false) <= 8) return resolve(-1) - const marker = view.getUint16(offset, false) - offset += 2 - if (marker == 0xFFE1) { - if (view.getUint32(offset += 2, false) != 0x45786966) { - return resolve(-1) - } - - var little = view.getUint16(offset += 6, false) == 0x4949 - offset += view.getUint32(offset + 4, little) - var tags = view.getUint16(offset, little) - offset += 2 - for (var i = 0; i < tags; i++) { - if (view.getUint16(offset + (i * 12), little) == 0x0112) { - return resolve(view.getUint16(offset + (i * 12) + 8, little)) - } - } - } else if ((marker & 0xFF00) != 0xFF00) { - break - } else { - offset += view.getUint16(offset, false) - } - } - return resolve(-1) - } - reader.onerror = (e) => reject(e) - reader.readAsArrayBuffer(file) - }) -} - -/** - * - * @param {HTMLCanvasElement | OffscreenCanvas} canvas - * @param options - * @returns {HTMLCanvasElement | OffscreenCanvas} - */ -export function handleMaxWidthOrHeight (canvas, options) { - const width = canvas.width - const height = canvas.height - const maxWidthOrHeight = options.maxWidthOrHeight - - const needToHandle = isFinite(maxWidthOrHeight) && (width > maxWidthOrHeight || height > maxWidthOrHeight) - - let newCanvas = canvas - let ctx - - if (needToHandle) { - [newCanvas, ctx] = getNewCanvasAndCtx(width, height) - if (width > height) { - newCanvas.width = maxWidthOrHeight - newCanvas.height = (height / width) * maxWidthOrHeight - } else { - newCanvas.width = (width / height) * maxWidthOrHeight - newCanvas.height = maxWidthOrHeight - } - ctx.drawImage(canvas, 0, 0, newCanvas.width, newCanvas.height) - - cleanupCanvasMemory(canvas) - } - - return newCanvas -} - -/** - * followExifOrientation - * source: https://stackoverflow.com/a/40867559/10395024 - * - * @param {HTMLCanvasElement | OffscreenCanvas} canvas - * @param {number} exifOrientation - * @returns {HTMLCanvasElement | OffscreenCanvas} canvas - */ -export function followExifOrientation (canvas, exifOrientation) { - const width = canvas.width - const height = canvas.height - - const [newCanvas, ctx] = getNewCanvasAndCtx(width, height) - - // set proper canvas dimensions before transform & export - Iif (4 < exifOrientation && exifOrientation < 9) { - newCanvas.width = height - newCanvas.height = width - } else { - newCanvas.width = width - newCanvas.height = height - } - - // transform context before drawing image - switch (exifOrientation) { - case 2: - ctx.transform(-1, 0, 0, 1, width, 0) - break - case 3: - ctx.transform(-1, 0, 0, -1, width, height) - break - case 4: - ctx.transform(1, 0, 0, -1, 0, height) - break - case 5: - ctx.transform(0, 1, 1, 0, 0, 0) - break - case 6: - ctx.transform(0, 1, -1, 0, height, 0) - break - case 7: - ctx.transform(0, -1, -1, 0, height, width) - break - case 8: - ctx.transform(0, -1, 1, 0, 0, width) - break - default: - break - } - - ctx.drawImage(canvas, 0, 0, width, height) - - cleanupCanvasMemory(canvas) - - return newCanvas -} - -/** - * get new Canvas and it's context - * @param width - * @param height - * @returns {[HTMLCanvasElement | OffscreenCanvas, CanvasRenderingContext2D]} - */ -export function getNewCanvasAndCtx (width, height) { - let canvas - let ctx - try { - canvas = new OffscreenCanvas(width, height) - ctx = canvas.getContext('2d') - if (ctx === null) { - throw new Error('getContext of OffscreenCanvas returns null') - } - } catch (e) { - canvas = document.createElement('canvas') - ctx = canvas.getContext('2d') - } - canvas.width = width - canvas.height = height - // ctx.fillStyle = '#fff' - // ctx.fillRect(0, 0, width, height) - return [canvas, ctx] -} - -/** - * clear Canvas memory - * @param canvas - * @returns null - */ -export function cleanupCanvasMemory (canvas) { - // garbage clean canvas for safari - // ref: https://bugs.webkit.org/show_bug.cgi?id=195325 - canvas.width = 0 - canvas.height = 0 -} - -Eif (isBrowser) { -// Polyfill for Number.isInteger - Number.isInteger = Number.isInteger || function (value) { - return typeof value === 'number' && - isFinite(value) && - Math.floor(value) === value - } -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
-| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 | - - -1x - - - -1x - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import imageCompression from './index'
-import compress from './image-compression'
-
-let cnt = 0
-let imageCompressionLibUrl
-
-function createWorker (f) {
- return new Worker(URL.createObjectURL(new Blob([`(${f})()`])))
-}
-
-const worker = createWorker(() => {
- self.addEventListener('message', async (e) => {
- const { file, id, imageCompressionLibUrl, options } = e.data
- try {
- // console.log('[worker] importScripts', imageCompressionLibUrl)
- importScripts(imageCompressionLibUrl)
- // console.log('[worker] self', self)
- const compressedFile = await imageCompression(file, options)
- self.postMessage({ file: compressedFile, id })
- } catch (e) {
- // console.error('[worker] error', e)
- self.postMessage({ error: e.message, id })
- }
- })
-})
-
-function createSourceObject (str) {
- return URL.createObjectURL(new Blob([str], { type: 'application/javascript' }))
-}
-
-export function compressOnWebWorker (file, options) {
- return new Promise(async (resolve, reject) => {
- if (!imageCompressionLibUrl) {
- imageCompressionLibUrl = createSourceObject(`
- function imageCompression (){return (${imageCompression}).apply(null, arguments)}
-
- imageCompression.getDataUrlFromFile = ${imageCompression.getDataUrlFromFile}
- imageCompression.getFilefromDataUrl = ${imageCompression.getFilefromDataUrl}
- imageCompression.loadImage = ${imageCompression.loadImage}
- imageCompression.drawImageInCanvas = ${imageCompression.drawImageInCanvas}
- imageCompression.drawFileInCanvas = ${imageCompression.drawFileInCanvas}
- imageCompression.canvasToFile = ${imageCompression.canvasToFile}
- imageCompression.getExifOrientation = ${imageCompression.getExifOrientation}
- imageCompression.handleMaxWidthOrHeight = ${imageCompression.handleMaxWidthOrHeight}
- imageCompression.followExifOrientation = ${imageCompression.followExifOrientation}
-
- getDataUrlFromFile = imageCompression.getDataUrlFromFile
- getFilefromDataUrl = imageCompression.getFilefromDataUrl
- loadImage = imageCompression.loadImage
- drawImageInCanvas = imageCompression.drawImageInCanvas
- drawFileInCanvas = imageCompression.drawFileInCanvas
- canvasToFile = imageCompression.canvasToFile
- getExifOrientation = imageCompression.getExifOrientation
- handleMaxWidthOrHeight = imageCompression.handleMaxWidthOrHeight
- followExifOrientation = imageCompression.followExifOrientation
-
- function compress (){return (${compress}).apply(null, arguments)}
- `)
- // imageCompressionLibUrl = new URL('../dist/browser-image-compression.js', window.location.href).href
- }
- let id = cnt++
-
- function handler (e) {
- if (e.data.id === id) {
- worker.removeEventListener('message', handler)
- if (e.data.error) {
- reject(e.data.error)
- }
- resolve(e.data.file)
- }
- }
-
- worker.addEventListener('message', handler)
- worker.postMessage({ file, id, imageCompressionLibUrl, options })
- })
-} |