{"id":47998957,"url":"https://github.com/j9t/compressorjs-next","last_synced_at":"2026-04-04T12:10:45.365Z","repository":{"id":336708727,"uuid":"1141739567","full_name":"j9t/compressorjs-next","owner":"j9t","description":"JavaScript image compressor and converter","archived":false,"fork":false,"pushed_at":"2026-03-26T12:13:07.000Z","size":1578,"stargazers_count":2,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-30T03:46:12.821Z","etag":null,"topics":["blob","browser","canvas","client-side","compress","compressor","conversion","converter","image","image-compression","image-processing","image-upload","javascript","jpeg","jpg","lossy-compression","png","webp"],"latest_commit_sha":null,"homepage":"https://j9t.github.io/compressorjs-next/","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/j9t.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"j9t"}},"created_at":"2026-01-25T10:49:46.000Z","updated_at":"2026-03-17T10:22:42.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/j9t/compressorjs-next","commit_stats":null,"previous_names":["j9t/compressorjs-next"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/j9t/compressorjs-next","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j9t%2Fcompressorjs-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j9t%2Fcompressorjs-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j9t%2Fcompressorjs-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j9t%2Fcompressorjs-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/j9t","download_url":"https://codeload.github.com/j9t/compressorjs-next/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j9t%2Fcompressorjs-next/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31398902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["blob","browser","canvas","client-side","compress","compressor","conversion","converter","image","image-compression","image-processing","image-upload","javascript","jpeg","jpg","lossy-compression","png","webp"],"created_at":"2026-04-04T12:10:44.882Z","updated_at":"2026-04-04T12:10:45.353Z","avatar_url":"https://github.com/j9t.png","language":"JavaScript","funding_links":["https://github.com/sponsors/j9t"],"categories":[],"sub_categories":[],"readme":"# Compressor.js Next\n\n[![npm version](https://img.shields.io/npm/v/compressorjs-next.svg)](https://www.npmjs.com/package/compressorjs-next) [![Build status](https://github.com/j9t/compressorjs-next/workflows/Tests/badge.svg)](https://github.com/j9t/compressorjs-next/actions) [![Socket](https://badge.socket.dev/npm/package/compressorjs-next)](https://socket.dev/npm/package/compressorjs-next)\n\nModernized, optimized, and maintained fork of [Fengyuan Chen’s Compressor.js](https://github.com/fengyuanchen/compressorjs).\n\nA JavaScript image compressor and converter. 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 an image on the client side before uploading it.\n\n## Table of contents\n\n* [Migrating from Compressor.js](#migrating-from-compressorjs)\n* [Main files](#main-files)\n* [Getting started](#getting-started)\n* [Options](#options)\n* [Methods](#methods)\n* [Browser support](#browser-support)\n* [Contributing](#contributing)\n* [Versioning](#versioning)\n* [License](#license)\n\n## Migrating from Compressor.js\n\nChange the package name from `compressorjs` to `compressorjs-next` in your `package.json` and imports (`import Compressor from 'compressorjs-next'`).\n\nThe API is otherwise the same, with these exceptions (as of 2.0.0—follow [the changelog](https://github.com/j9t/compressorjs-next/blob/main/CHANGELOG.md) from there):\n\n* ESM is now the default module format (CommonJS is still supported)\n* The `checkOrientation` option has been removed, as all supported browsers now handle EXIF orientation natively\n* The default for `convertTypes` has changed from `['image/png']` to `[]`\n* The `noConflict()` method has been removed\n* Internet Explorer is no longer supported\n\n## Main files\n\n```text\ndist/\n├── compressor.js        (UMD)\n├── compressor.min.js    (UMD, compressed)\n├── compressor.esm.js    (ES Module, default)\n└── compressor.common.js (CommonJS)\n```\n\n## Getting started\n\n### Install\n\n```shell\nnpm i compressorjs-next\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-next';\n\ndocument.getElementById('file').addEventListener('change', (e) =\u003e {\n  const file = e.target.files[0];\n\n  if (!file) {\n    return;\n  }\n\n  const compressor = 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## 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### `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\nAvoid 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](https://webglossary.info/terms/mime-type/) of the output image. By default, the original MIME type of the source image file will be used.\n\n**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: `[]`\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 JPEG.\n\nFor 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 JPEG. Can also be disabled through the value `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`](https://developer.mozilla.org/en-US/docs/Web/API/File) object, which is also a `Blob`).\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## 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## Browser support\n\nSupports [browserslist `defaults`](https://browsersl.ist/#q=defaults).\n\n**Note:** When the browser’s canvas produces unreliable pixel data—as with Firefox’s `privacy.resistFingerprinting` setting or privacy-focused forks like LibreWolf—, compression, resizing, and format conversion are not possible. In this case, the library falls back to returning the original image with EXIF data stripped (JPEG) or unchanged (other formats).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj9t%2Fcompressorjs-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj9t%2Fcompressorjs-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj9t%2Fcompressorjs-next/lists"}