{"id":13465000,"url":"https://github.com/fengyuanchen/compressorjs","last_synced_at":"2025-05-12T05:32:42.330Z","repository":{"id":38361042,"uuid":"98267887","full_name":"fengyuanchen/compressorjs","owner":"fengyuanchen","description":"JavaScript image compressor.","archived":false,"fork":false,"pushed_at":"2025-01-05T14:37:28.000Z","size":822,"stargazers_count":5504,"open_issues_count":11,"forks_count":446,"subscribers_count":39,"default_branch":"main","last_synced_at":"2025-05-12T02:45:51.148Z","etag":null,"topics":["file-upload","image-compression","image-compressor","javascript"],"latest_commit_sha":null,"homepage":"https://fengyuanchen.github.io/compressorjs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fengyuanchen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-07-25T05:32:57.000Z","updated_at":"2025-05-11T04:27:03.000Z","dependencies_parsed_at":"2024-06-02T02:33:07.587Z","dependency_job_id":"9022b1a3-f679-471f-8ea8-bc388f044186","html_url":"https://github.com/fengyuanchen/compressorjs","commit_stats":{"total_commits":83,"total_committers":6,"mean_commits":"13.833333333333334","dds":0.08433734939759041,"last_synced_commit":"1f023ac43ec41716cf9feea4b399c411924affd6"},"previous_names":["xkeshi/image-compressor"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengyuanchen%2Fcompressorjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengyuanchen%2Fcompressorjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengyuanchen%2Fcompressorjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengyuanchen%2Fcompressorjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fengyuanchen","download_url":"https://codeload.github.com/fengyuanchen/compressorjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253672734,"owners_count":21945482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-upload","image-compression","image-compressor","javascript"],"created_at":"2024-07-31T14:00:54.661Z","updated_at":"2025-05-12T05:32:42.265Z","avatar_url":"https://github.com/fengyuanchen.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Compressor.js\n\n[![Coverage Status](https://img.shields.io/codecov/c/github/fengyuanchen/compressorjs.svg)](https://codecov.io/gh/fengyuanchen/compressorjs) [![Downloads](https://img.shields.io/npm/dm/compressorjs.svg)](https://www.npmjs.com/package/compressorjs) [![Version](https://img.shields.io/npm/v/compressorjs.svg)](https://www.npmjs.com/package/compressorjs) [![Gzip Size](https://img.shields.io/bundlephobia/minzip/compressorjs.svg)](https://unpkg.com/compressorjs/dist/compressor.common.js)\n\n\u003e JavaScript image compressor. Uses the Browser's native [HTMLCanvasElement.toBlob()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) method to do the compression work, which means it is **lossy compression**, **asynchronous**, and has **different compression effects in different browsers**. Generally use this to precompress a image on the client side before uploading it.\n\n- [Website](https://fengyuanchen.github.io/compressorjs)\n\n## Table of contents\n\n- [Main Files](#main-files)\n- [Getting started](#getting-started)\n- [Options](#options)\n- [Methods](#methods)\n- [No conflict](#no-conflict)\n- [Browser support](#browser-support)\n- [Contributing](#contributing)\n- [Versioning](#versioning)\n- [License](#license)\n\n## Main Files\n\n```text\ndist/\n├── compressor.js        (UMD)\n├── compressor.min.js    (UMD, compressed)\n├── compressor.common.js (CommonJS, default)\n└── compressor.esm.js    (ES Module)\n```\n\n## Getting started\n\n### Install\n\n```shell\nnpm install compressorjs\n```\n\n### Usage\n\n#### Syntax\n\n```js\nnew Compressor(file[, options])\n```\n\n**file**\n\n- Type: [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)\n\nThe target image file for compressing.\n\n**options**\n\n- Type: `Object`\n- Optional\n\nThe options for compressing. Check out the available [options](#options).\n\n#### Example\n\n```html\n\u003cinput type=\"file\" id=\"file\" accept=\"image/*\"\u003e\n```\n\n```js\nimport axios from 'axios';\nimport Compressor from 'compressorjs';\n\ndocument.getElementById('file').addEventListener('change', (e) =\u003e {\n  const file = e.target.files[0];\n\n  if (!file) {\n    return;\n  }\n\n  new Compressor(file, {\n    quality: 0.6,\n\n    // The compression process is asynchronous,\n    // which means you have to access the `result` in the `success` hook function.\n    success(result) {\n      const formData = new FormData();\n\n      // The third parameter is required for server\n      formData.append('file', result, result.name);\n\n      // Send the compressed image file to server with XMLHttpRequest.\n      axios.post('/path/to/upload', formData).then(() =\u003e {\n        console.log('Upload success');\n      });\n    },\n    error(err) {\n      console.log(err.message);\n    },\n  });\n\n});\n```\n\n[⬆ back to top](#table-of-contents)\n\n## Options\n\nYou may set compressor options with `new Compressor(file, options)`.\nIf you want to change the global default options, You may use `Compressor.setDefaults(options)`.\n\n### strict\n\n- Type: `boolean`\n- Default: `true`\n\nIndicates whether to output the original image instead of the compressed one when the size of the compressed image is greater than the original one's, except the following cases:\n\n- The `retainExif` option is set to `true`.\n- The `mimeType` option is set and its value is different from the mime type of the image.\n- The `width` option is set and its value is greater than the natural width of the image.\n- The `height` option is set and its value is greater than the natural height of the image.\n- The `minWidth` option is set and its value is greater than the natural width of the image.\n- The `minHeight` option is set and its value is greater than the natural height of the image.\n- The `maxWidth` option is set and its value is less than the natural width of the image.\n- The `maxHeight` option is set and its value is less than the natural height of the image.\n\n### checkOrientation\n\n- Type: `boolean`\n- Default: `true`\n\nIndicates whether to read the image's Exif Orientation value (JPEG image only), and then rotate or flip the image automatically with the value.\n\n**Notes:**\n\n- Don't trust this all the time as some JPEG images have incorrect (not standard) Orientation values.\n- If the size of the target image is too large (e.g., greater than 10 MB), you should disable this option to avoid an out-of-memory crash.\n- The image's Exif information will be removed after compressed, so if you need the Exif information, you may need to upload the original image as well.\n\n### retainExif\n\n- Type: `boolean`\n- Default: `false`\n\nIndicates whether to retain the image's Exif information after compressed.\n\n### maxWidth\n\n- Type: `number`\n- Default: `Infinity`\n\nThe max-width of the output image. The value should be greater than `0`.\n\n\u003e Avoid getting a blank output image, you might need to set the `maxWidth` and `maxHeight` options to limited numbers, because of [the size limits of a canvas element](https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element), recommend to use `4096` or lesser.\n\n### maxHeight\n\n- Type: `number`\n- Default: `Infinity`\n\nThe max height of the output image. The value should be greater than `0`.\n\n### minWidth\n\n- Type: `number`\n- Default: `0`\n\nThe min-width of the output image. The value should be greater than `0` and should not be greater than the `maxWidth`.\n\n### minHeight\n\n- Type: `number`\n- Default: `0`\n\nThe min-height of the output image. The value should be greater than `0` and should not be greater than the `maxHeight`.\n\n### width\n\n- Type: `number`\n- Default: `undefined`\n\nThe width of the output image. If not specified, the natural width of the original image will be used, or if the `height` option is set, the width will be computed automatically by the natural aspect ratio.\n\n### height\n\n- Type: `number`\n- Default: `undefined`\n\nThe height of the output image. If not specified, the natural height of the original image will be used, or if the `width` option is set, the height will be computed automatically by the natural aspect ratio.\n\n### resize\n\n- Type: `string`\n- Default: `\"none\"`\n- Options: `\"none\"`, `\"contain\"`, and `\"cover\"`.\n\nSets how the size of the image should be resized to the container specified by the `width` and `height` options.\n\n**Note:** This option only available when both the `width` and `height` options are specified.\n\n### quality\n\n- Type: `number`\n- Default: `0.8`\n\nThe quality of the output image. It must be a number between `0` and `1`. If this argument is anything else, the default values `0.92` and `0.80` are used for `image/jpeg` and `image/webp` respectively. Other arguments are ignored. Be careful to use `1` as it may make the size of the output image become larger.\n\n**Note:** This option only available for `image/jpeg` and `image/webp` images.\n\n\u003e Check out the documentation of the [HTMLCanvasElement.toBlob()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) method for more detail.\n\n**Examples**:\n\n| Quality | Input size | Output size | Compression ratio | Description |\n| --- | --- | --- | --- | --- |\n| 0 | 2.12 MB | 114.61 KB | 94.72% | - |\n| 0.2 | 2.12 MB | 349.57 KB | 83.90% | - |\n| 0.4 | 2.12 MB | 517.10 KB | 76.18% | - |\n| 0.6 | 2.12 MB | 694.99 KB | 67.99% | Recommend |\n| 0.8 | 2.12 MB | 1.14 MB | 46.41% | Recommend |\n| 1 | 2.12 MB | 2.12 MB | 0% | Not recommend |\n| NaN | 2.12 MB | 2.01 MB | 5.02% | - |\n\n### mimeType\n\n- Type: `string`\n- Default: `'auto'`\n- Options: `\"auto\"`, `\"image/png\"`, `\"image/jpeg\"`, and `\"image/webp\"`.\n\nThe mime type of the output image. By default, the original mime type of the source image file will be used.\n\n\u003e **Note:** Safari does not support `mimeType` conversion to `\"image/webp\"`. For more details, see the [browser compatibility of the `HTMLCanvasElement.toBlob()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#browser_compatibility).\n\n### convertTypes\n\n- Type: `Array` or `string` (multiple types should be separated by commas)\n- Default: `[\"image/png\"]`\n- Examples:\n  - `[\"image/png\", \"image/webp\"]`\n  - `\"image/png,image/webp\"`\n\nFiles whose file type is included in this list, and whose file size exceeds the `convertSize` value will be converted to JPEGs.\n\n\u003e For image file type support, see the [Image file type and format guide](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types).\n\n### convertSize\n\n- Type: `number`\n- Default: `5000000` (5 MB)\n\nFiles whose file type is included in the `convertTypes` list, and whose file size exceeds this value will be converted to JPEGs. To disable this, just set the value to `Infinity`.\n\n**Examples**:\n\n| convertSize | Input size (type) | Output size (type) | Compression ratio |\n| --- | --- | --- | --- |\n| 5 MB | 1.87 MB (PNG) | 1.87 MB (PNG) | 0% |\n| 5 MB | 5.66 MB (PNG) | 450.24 KB (JPEG) | 92.23% |\n| 5 MB | 9.74 MB (PNG) | 883.89 KB (JPEG) | 91.14% |\n\n### beforeDraw(context, canvas)\n\n- Type: `Function`\n- Default: `null`\n- Parameters:\n  - `context`: The 2d rendering context of the canvas.\n  - `canvas`: The canvas for compression.\n\nThe hook function to execute before drawing the image into the canvas for compression.\n\n```js\nnew Compressor(file, {\n  beforeDraw(context, canvas) {\n    context.fillStyle = '#fff';\n    context.fillRect(0, 0, canvas.width, canvas.height);\n    context.filter = 'grayscale(100%)';\n  },\n});\n```\n\n### drew(context, canvas)\n\n- Type: `Function`\n- Default: `null`\n- Parameters:\n  - `context`: The 2d rendering context of the canvas.\n  - `canvas`: The canvas for compression.\n\nThe hook function to execute after drawing the image into the canvas for compression.\n\n```js\nnew Compressor(file, {\n  drew(context, canvas) {\n    context.fillStyle = '#fff';\n    context.font = '2rem serif';\n    context.fillText('watermark', 20, canvas.height - 20);\n  },\n});\n```\n\n### success(result)\n\n- Type: `Function`\n- Default: `null`\n- Parameters:\n  - `result`: The compressed image (a `File` (**read only**) or `Blob` object).\n\nThe hook function to execute when successful to compress the image.\n\n### error(err)\n\n- Type: `Function`\n- Default: `null`\n- Parameters:\n  - `err`: The compression error (an `Error` object).\n\nThe hook function executes when fails to compress the image.\n\n[⬆ back to top](#table-of-contents)\n\n## Methods\n\n### abort()\n\nAbort the compression process.\n\n```js\nconst compressor = new Compressor(file);\n\n// Do something...\ncompressor.abort();\n```\n\n## No conflict\n\nIf you have to use another compressor with the same namespace, just call the `Compressor.noConflict` static method to revert to it.\n\n```html\n\u003cscript src=\"other-compressor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"compressor.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  Compressor.noConflict();\n  // Code that uses other `Compressor` can follow here.\n\u003c/script\u003e\n```\n\n## Browser support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Opera (latest)\n- Edge (latest)\n- Internet Explorer 10+\n\n## Contributing\n\nPlease read through our [contributing guidelines](.github/CONTRIBUTING.md).\n\n## Versioning\n\nMaintained under the [Semantic Versioning guidelines](https://semver.org/).\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/)\n\n[⬆ back to top](#table-of-contents)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffengyuanchen%2Fcompressorjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffengyuanchen%2Fcompressorjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffengyuanchen%2Fcompressorjs/lists"}