{"_id":"@cerulean-health/browser-image-compression","_rev":"3-8aff0abb6d68cce4d4fceec6ea054823","name":"@cerulean-health/browser-image-compression","dist-tags":{"latest":"1.0.17"},"versions":{"1.0.16":{"name":"@cerulean-health/browser-image-compression","version":"1.0.16","description":"Compress images in the browser","main":"dist/browser-image-compression.js","module":"dist/browser-image-compression.mjs","jsnext:main":"dist/browser-image-compression.mjs","types":"dist/browser-image-compression.d.ts","scripts":{"eslint":"eslint lib test","build":"rollup -c --environment BUILD:production","watch":"rollup -c -w","dev":"npm run watch","test":"cross-env NODE_ENV=test nyc mocha","posttest":"npm run coverage-badges","test:watch":"cross-env NODE_ENV=test nyc mocha -w","prepublishOnly":" npm run build","coverage-badges":"make-coverage-badge","commit":"cz"},"homepage":"https://github.com/cerulean-health/browser-image-compression#readme","repository":{"type":"git","url":"git+https://github.com/cerulean-health/browser-image-compression.git"},"bugs":{"url":"https://github.com/cerulean-health/browser-image-compression/issues"},"keywords":["image compression","browser","image processing","reduce resolution","reduce size"],"author":{"name":"Donald","email":"donaldcwl@gmail.com"},"license":"MIT","dependencies":{"core-js":"^3.16.1","uzip":"0.20201231.0"},"devDependencies":{"@babel/core":"^7.2.2","@babel/polyfill":"^7.2.5","@babel/preset-env":"^7.3.1","@babel/register":"^7.0.0","@rollup/plugin-commonjs":"^17.0.0","@rollup/plugin-node-resolve":"^11.0.1","babel-plugin-istanbul":"^6.0.0","canvas":"2.6.1","chai":"^4.1.0","chai-as-promised":"^7.1.1","cross-env":"^7.0.2","cz-conventional-changelog":"3.3.0","eslint":"^7.32.0","eslint-config-airbnb-base":"^14.2.1","eslint-plugin-import":"^2.22.1","istanbul":"^0.4.5","jsdom":"^15.1.1","make-coverage-badge":"^1.0.1","mocha":"7.1.0","nyc":"^15.0.1","rollup":"^2.8.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^3.3.0","rollup-plugin-license":"^2.0.0","rollup-plugin-nodent":"^0.2.2","rollup-plugin-terser":"^5.0.0","rollup-plugin-uglify":"^6.0.2"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"bc9b5f0793df9e28e7490890fd830cce89ff2fe7","_id":"@cerulean-health/browser-image-compression@1.0.16","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tnkg/45/1DvXnQ3fcxFpDKLcN0JubE7CyIcQmgkujXvBdKikKW9IW3IYVgABNMUBWIGHPC/STIOm7YrYvmtoGg==","shasum":"551fac3a1f5a4036b722630077aac301638363ef","tarball":"https://registry.npmjs.org/@cerulean-health/browser-image-compression/-/browser-image-compression-1.0.16.tgz","fileCount":9,"unpackedSize":1188021,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHPM5/4kXT/Yu7WPcDteSt5dAt3sbqfoYvkjMi8yashgIgThnIc9OmiGR0EwOLT7LHlCwXZuSsNuTCJrF2ePuRwqY="}]},"_npmUser":{"name":"jmerrifield","email":"jon@jmerrifield.com"},"directories":{},"maintainers":[{"name":"jmerrifield","email":"jon@jmerrifield.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/browser-image-compression_1.0.16_1632428130584_0.9983593327672569"},"_hasShrinkwrap":false},"1.0.17":{"name":"@cerulean-health/browser-image-compression","version":"1.0.17","description":"Compress images in the browser","main":"dist/browser-image-compression.js","module":"dist/browser-image-compression.mjs","jsnext:main":"dist/browser-image-compression.mjs","types":"dist/browser-image-compression.d.ts","scripts":{"eslint":"eslint lib test","build":"rollup -c --environment BUILD:production","watch":"rollup -c -w","dev":"npm run watch","test":"cross-env NODE_ENV=test nyc mocha","posttest":"npm run coverage-badges","test:watch":"cross-env NODE_ENV=test nyc mocha -w","prepublishOnly":" npm run build","coverage-badges":"make-coverage-badge","commit":"cz"},"homepage":"https://github.com/cerulean-health/browser-image-compression#readme","repository":{"type":"git","url":"git+https://github.com/cerulean-health/browser-image-compression.git"},"bugs":{"url":"https://github.com/cerulean-health/browser-image-compression/issues"},"keywords":["image compression","browser","image processing","reduce resolution","reduce size"],"author":{"name":"Donald","email":"donaldcwl@gmail.com"},"license":"MIT","dependencies":{"core-js":"^3.16.1","uzip":"0.20201231.0"},"devDependencies":{"@babel/core":"^7.2.2","@babel/polyfill":"^7.2.5","@babel/preset-env":"^7.3.1","@babel/register":"^7.0.0","@rollup/plugin-commonjs":"^17.0.0","@rollup/plugin-node-resolve":"^11.0.1","babel-plugin-istanbul":"^6.0.0","canvas":"2.6.1","chai":"^4.1.0","chai-as-promised":"^7.1.1","cross-env":"^7.0.2","cz-conventional-changelog":"3.3.0","eslint":"^7.32.0","eslint-config-airbnb-base":"^14.2.1","eslint-plugin-import":"^2.22.1","istanbul":"^0.4.5","jsdom":"^15.1.1","make-coverage-badge":"^1.0.1","mocha":"7.1.0","nyc":"^15.0.1","rollup":"^2.8.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^3.3.0","rollup-plugin-license":"^2.0.0","rollup-plugin-nodent":"^0.2.2","rollup-plugin-terser":"^5.0.0","rollup-plugin-uglify":"^6.0.2"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"bc9b5f0793df9e28e7490890fd830cce89ff2fe7","_id":"@cerulean-health/browser-image-compression@1.0.17","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-qfhM7A0M+gdd5i6a2uzqknKCuQOVoS8eHtS9aLA/w3kIzPG5tDcZDpYtXIxreR4k8UbM2L2CY5t0R7X2hCjRUw==","shasum":"873b8fb1de8a1adad7d0d1eefbf6140e208b82be","tarball":"https://registry.npmjs.org/@cerulean-health/browser-image-compression/-/browser-image-compression-1.0.17.tgz","fileCount":9,"unpackedSize":1188375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzcP0CRA9TVsSAnZWagAABFoP/RmFcqRcNIYZxzuXQN+b\nPFPL0EtXt1GSkh0UhSOaSS0I1QgjBXMMdtaF67hnbrao1CMprzzCWBX/3mDc\nmWTae2IhIMFea9i0SpndiKE4yQPUmpjm9tmBUdM3z06T/52HnqcKUz7QMwTm\nCUO9/s/Jt2XJM+Da7CopL2TlR6z+yklINSL701ho78OCM4R+7fYzIGusGjNv\n/+7UTAysBlBpaznOSQxxBASk9sNer6aqGPkIpImG1W5AvnlNS4+3TFHFYEHM\nWEEAsFC16PSHdpeoa+kzlCbSNc8JJfqu2tmA8QBadUkJD/zee+U/mNkw3QOb\nRyLbZY2nbnfEIDOVGg5dcMGSmMC451FNB7GsSgginpzDA6ZI2YACcezu//r6\nHmK1YvuNAua5xzfkOfsQN9C6ar47ixNuLc5KqlNeskmqBulhWuR8VteT+PaU\n3emW3/Rw9QgMU0R+Kr45f7NXXoFIFXnGJw/iU5k5ItQ0Qv04mSxqxjtk5Rzr\nq8fu8mfi79FDYWDSDglcr3/j/9MioY9JOtW8Cr1Zn2BXeh2NANwRz0ktM6d6\naSE2Uuls7uARQzHTDLRcPdxXGNC43D9oXG8TZOiA6xkpEaA/xj4ctb3qkPOJ\nmDuKRfcn3KHCTQ3+cg97fDZH0V81TTC70uAWNU9StkPJqhU2NGLj/X0eiViH\nkclH\r\n=/NpQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDga6fXxai+DS/HfMy0Y4feAyL2A5Jw5qSab35v8nLfqQIgH4lvOmWcGX9uo6KmmGkXI+1bGP1m52f+JsUxwOap0z0="}]},"_npmUser":{"name":"jmerrifield","email":"jon@jmerrifield.com"},"directories":{},"maintainers":[{"name":"jmerrifield","email":"jon@jmerrifield.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/browser-image-compression_1.0.17_1632429035260_0.24405332195626106"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-23T20:15:30.530Z","1.0.16":"2021-09-23T20:15:30.796Z","modified":"2022-04-04T22:22:50.472Z","1.0.17":"2021-09-23T20:30:35.409Z"},"maintainers":[{"name":"jmerrifield","email":"jon@jmerrifield.com"}],"description":"Compress images in the browser","homepage":"https://github.com/cerulean-health/browser-image-compression#readme","keywords":["image compression","browser","image processing","reduce resolution","reduce size"],"repository":{"type":"git","url":"git+https://github.com/cerulean-health/browser-image-compression.git"},"author":{"name":"Donald","email":"donaldcwl@gmail.com"},"bugs":{"url":"https://github.com/cerulean-health/browser-image-compression/issues"},"license":"MIT","readme":"# Forked from @Donaldcwl/browser-image-compression #\n\n# Browser Image Compression #\n[![npm](https://img.shields.io/npm/v/browser-image-compression.svg)](https://www.npmjs.com/package/browser-image-compression)\n[![npm](./coverage/badge.svg)](https://github.com/Donaldcwl/browser-image-compression)\n[![npm](https://img.shields.io/npm/l/browser-image-compression.svg)](https://github.com/Donaldcwl/browser-image-compression)\n\nJavascript module to be run in the web browser for image compression.\n\n## Features ##\n- You can use this module to compress jpeg and png image by reducing **resolution** or **storage size** before uploading to application server to save bandwidth.\n- **Multi-thread** (web worker) non-blocking compression are supported through options.\n\n## Install ##\nYou can download imageCompression from the [dist folder][dist]. Alternatively, you can install it via yarn or npm\n```\nnpm install browser-image-compression --save\nor\nyarn add browser-image-compression\n```\nor use a CDN like [delivrjs]:\n```\nhttps://cdn.jsdelivr.net/npm/browser-image-compression@1.0.15/dist/browser-image-compression.js\nor\nhttps://cdn.jsdelivr.net/npm/browser-image-compression@latest/dist/browser-image-compression.js\n```\n\n## Support\nIf this project help you reduce time to develop, you can buy me a cup of coffee :)\n\n\"Buy\n\n## How to use this module in your project? ##\n#### Use as ES module ####\n\n(can be used in framework like React, Angular, Vue etc)\n\n(work with bundler like webpack and rollup)\n```javascript\nimport imageCompression from 'browser-image-compression';\n```\n\nor\n\n#### In html file ####\n```html\n\n```\n\n## API ##\n### Main function ###\n```javascript\n// you should provide one of maxSizeMB, maxWidthOrHeight in the options\nconst options = { \n maxSizeMB: number, // (default: Number.POSITIVE_INFINITY)\n maxWidthOrHeight: number, // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)\n // but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser.\n // Please check the Caveat part for details.\n onProgress: Function, // optional, a function takes one progress argument (percentage from 0 to 100) \n useWebWorker: boolean, // optional, use multi-thread web worker, fallback to run in main-thread (default: true)\n\n // following options are for advanced users\n maxIteration: number, // optional, max number of iteration to compress the image (default: 10)\n exifOrientation: number, // optional, see https://stackoverflow.com/a/32490603/10395024\n fileType: string, // optional, fileType override\n initialQuality: number // optional, initial quality value between 0 and 1 (default: 1)\n}\n\nimageCompression(file: File, options): Promise\n```\n\n#### Caveat ####\nEach browser limits [the maximum size](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size) of a Canvas object.
\nSo, we resize the image to less than the maximum size that each browser restricts.
\n(However, the `proportion/ratio` of the image remains.)\n\n### Helper function ###\n- for advanced users only, most users won't need to use the helper functions\n```javascript\nimageCompression.getDataUrlFromFile(file: File): Promise\nimageCompression.getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise\nimageCompression.loadImage(url: string): Promise\nimageCompression.drawImageInCanvas(img: HTMLImageElement): HTMLCanvasElement | OffscreenCanvas\nimageCompression.drawFileInCanvas(file: File): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>\nimageCompression.canvasToFile(canvas: HTMLCanvasElement | OffscreenCanvas, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise\nimageCompression.getExifOrientation(file: File): Promise // based on https://stackoverflow.com/a/32490603/10395024\n```\n\n## Usage ##\n```html\n\n```\nasync await syntax:\n```javascript\nasync function handleImageUpload(event) {\n\n const imageFile = event.target.files[0];\n console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true\n console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);\n\n const options = {\n maxSizeMB: 1,\n maxWidthOrHeight: 1920,\n useWebWorker: true\n }\n try {\n const compressedFile = await imageCompression(imageFile, options);\n console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true\n console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB\n\n await uploadToServer(compressedFile); // write your own logic\n } catch (error) {\n console.log(error);\n }\n\n}\n```\nPromise.then().catch() syntax:\n```javascript\nfunction handleImageUpload(event) {\n\n var imageFile = event.target.files[0];\n console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true\n console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);\n\n var options = {\n maxSizeMB: 1,\n maxWidthOrHeight: 1920,\n useWebWorker: true\n }\n imageCompression(imageFile, options)\n .then(function (compressedFile) {\n console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true\n console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB\n\n return uploadToServer(compressedFile); // write your own logic\n })\n .catch(function (error) {\n console.log(error.message);\n });\n}\n```\n\n## Demo / Example ##\nopen https://donaldcwl.github.io/browser-image-compression/example/basic.html\n\nor check the \"[example]\" folder in this repo\n\n## Browsers support ##\n\n| [\"IE](http://godban.github.io/browsers-support-badges/)
IE / Edge | [\"Firefox\"](http://godban.github.io/browsers-support-badges/)
Firefox | [\"Chrome\"](http://godban.github.io/browsers-support-badges/)
Chrome | [\"Safari\"](http://godban.github.io/browsers-support-badges/)
Safari | [\"Opera\"](http://godban.github.io/browsers-support-badges/)
Opera | [\"Chrome](http://godban.github.io/browsers-support-badges/)
Chrome for Android |\n| --------- | --------- | --------- | --------- | --------- | --------- |\n| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions\n\n## Remarks for compression to work in Web Worker\nThe browser need to support \"OffscreenCanvas\" API in order to take advantage of non-blocking compression. If browser do not support \"OffscreenCanvas\" API, main thread is used instead. See https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility for browser compatibility of \"OffscreenCanvas\" API.\n\n## Typescript type definitions ##\nTypescript definitions are included in the package & referenced in the `types` section of the `package.json`\n\n## Contribution ##\n1. fork the repo and git clone it\n2. run `npm run watch` # it will watch code change in lib/ folder and generate js in dist/ folder\n3. add/update code in lib/ folder\n4. try the code by opening example/development.html which will load the js in dist/ folder\n5. add/update test in test/ folder\n6. `npm run test`\n7. push to your forked repo on github\n8. make a pull request to dev branch of this repo\n\n[dist]: https://github.com/Donaldcwl/browser-image-compression/tree/master/dist\n[example]: https://github.com/Donaldcwl/browser-image-compression/tree/master/example\n[delivrjs]: https://cdn.jsdelivr.net/\n","readmeFilename":"README.md"}