# @gzup/react-image-file-resizer > React module that can rescaled local images. You can change image's width, height, format, rotation and quality. It returns resized image's new base64 URI or Blob. The URI can be used as the source of an component. Latest version **1.0.1** (published 2024-03-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @gzup/react-image-file-resizer pnpm add @gzup/react-image-file-resizer yarn add @gzup/react-image-file-resizer bun add @gzup/react-image-file-resizer ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.1 | | Published | 2024-03-17 | | First published | 2024-03-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 473 | | Unpacked size | 32 KB | | Known vulnerabilities | 0 (+7 in 5 direct dependencies) | | Install scripts | no | | GitHub stars | 336 | | Author | Oussama Ghedjati | | Maintainers | gzup | | Keywords | react, image-resizer, image-file-resizer, image, photo, file, resize, resizer, compress, rotate, scaling, scale | ## Links - npm: https://www.npmjs.com/package/@gzup/react-image-file-resizer - Repository: https://github.com/onurzorluer/react-image-file-resizer - Homepage: https://github.com/onurzorluer/react-image-file-resizer#readme - Issues: https://github.com/onurzorluer/react-image-file-resizer/issues - npm.io page: https://npm.io/package/@gzup/react-image-file-resizer ## Dependencies (473) - [co](https://npm.io/package/co.md) ^4.6.0 - [ms](https://npm.io/package/ms.md) ^2.1.2 - [ws](https://npm.io/package/ws.md) ^7.4.6 - [ajv](https://npm.io/package/ajv.md) ^6.12.6 - [has](https://npm.io/package/has.md) ^1.0.3 - [psl](https://npm.io/package/psl.md) ^1.8.0 - [ret](https://npm.io/package/ret.md) ^0.1.15 - [tmp](https://npm.io/package/tmp.md) ^0.0.33 - [use](https://npm.io/package/use.md) ^3.1.1 - [abab](https://npm.io/package/abab.md) ^2.0.5 - [atob](https://npm.io/package/atob.md) ^2.1.2 - [base](https://npm.io/package/base.md) ^0.11.2 - [bser](https://npm.io/package/bser.md) ^2.1.1 - [exit](https://npm.io/package/exit.md) ^0.1.2 - [glob](https://npm.io/package/glob.md) ^7.1.7 - [levn](https://npm.io/package/levn.md) ^0.3.0 - [once](https://npm.io/package/once.md) ^1.4.0 - [pify](https://npm.io/package/pify.md) ^5.0.0 - [pump](https://npm.io/package/pump.md) ^3.0.0 - [rsvp](https://npm.io/package/rsvp.md) ^4.8.5 - [rxjs](https://npm.io/package/rxjs.md) ^6.6.7 - [sane](https://npm.io/package/sane.md) ^4.1.0 - [tmpl](https://npm.io/package/tmpl.md) ^1.0.5 - [tr46](https://npm.io/package/tr46.md) ^2.1.0 - [urix](https://npm.io/package/urix.md) ^0.1.0 - [uuid](https://npm.io/package/uuid.md) ^8.3.2 - [y18n](https://npm.io/package/y18n.md) ^4.0.3 - [acorn](https://npm.io/package/acorn.md) ^8.4.0 - [async](https://npm.io/package/async.md) ^3.2.3 - [chalk](https://npm.io/package/chalk.md) ^2.4.2 - [cliui](https://npm.io/package/cliui.md) ^6.0.0 - [cssom](https://npm.io/package/cssom.md) ^0.4.4 - [debug](https://npm.io/package/debug.md) ^4.3.1 - [execa](https://npm.io/package/execa.md) ^4.1.0 - [is-ci](https://npm.io/package/is-ci.md) ^2.0.0 - [isexe](https://npm.io/package/isexe.md) ^2.0.0 - [jsdom](https://npm.io/package/jsdom.md) ^16.6.0 - [jsesc](https://npm.io/package/jsesc.md) ^2.5.2 - [json5](https://npm.io/package/json5.md) ^2.2.0 - [kleur](https://npm.io/package/kleur.md) ^3.0.3 - [leven](https://npm.io/package/leven.md) ^3.1.0 - [p-try](https://npm.io/package/p-try.md) ^2.2.0 - [pegjs](https://npm.io/package/pegjs.md) ^0.10.0 - [saxes](https://npm.io/package/saxes.md) ^5.0.1 - [slash](https://npm.io/package/slash.md) ^1.0.0 - [tslib](https://npm.io/package/tslib.md) ^1.14.1 - [which](https://npm.io/package/which.md) ^2.0.2 - [yargs](https://npm.io/package/yargs.md) ^15.4.1 - [big.js](https://npm.io/package/big.js.md) ^5.2.2 - [braces](https://npm.io/package/braces.md) ^3.0.2 - [events](https://npm.io/package/events.md) ^3.3.0 - [expect](https://npm.io/package/expect.md) ^26.6.2 - [for-in](https://npm.io/package/for-in.md) ^1.0.2 - [growly](https://npm.io/package/growly.md) ^1.3.0 - [is-wsl](https://npm.io/package/is-wsl.md) ^2.2.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.5 - [nwsapi](https://npm.io/package/nwsapi.md) ^2.2.0 - [parse5](https://npm.io/package/parse5.md) ^6.0.1 - [rimraf](https://npm.io/package/rimraf.md) ^3.0.2 - [semver](https://npm.io/package/semver.md) ^6.3.0 - [terser](https://npm.io/package/terser.md) ^5.7.0 - [throat](https://npm.io/package/throat.md) ^5.0.0 - [uri-js](https://npm.io/package/uri-js.md) ^4.4.1 - [walker](https://npm.io/package/walker.md) ^1.0.7 - [wrappy](https://npm.io/package/wrappy.md) ^1.0.2 - [babylon](https://npm.io/package/babylon.md) ^6.18.0 - [chardet](https://npm.io/package/chardet.md) ^0.7.0 - [ci-info](https://npm.io/package/ci-info.md) ^2.0.0 - [core-js](https://npm.io/package/core-js.md) ^2.6.12 - [deep-is](https://npm.io/package/deep-is.md) ^0.1.3 - [envinfo](https://npm.io/package/envinfo.md) ^7.8.1 - [esprima](https://npm.io/package/esprima.md) ^4.0.1 - [esutils](https://npm.io/package/esutils.md) ^2.0.3 - [exec-sh](https://npm.io/package/exec-sh.md) ^0.3.6 - [extglob](https://npm.io/package/extglob.md) ^0.3.2 - [figures](https://npm.io/package/figures.md) ^3.2.0 - [find-up](https://npm.io/package/find-up.md) ^4.1.0 - [for-own](https://npm.io/package/for-own.md) ^0.1.5 - [gensync](https://npm.io/package/gensync.md) ^1.0.0-beta.2 - [globals](https://npm.io/package/globals.md) ^11.12.0 - [is-glob](https://npm.io/package/is-glob.md) ^2.0.1 - [isarray](https://npm.io/package/isarray.md) ^1.0.0 - [js-yaml](https://npm.io/package/js-yaml.md) ^3.14.1 - [kind-of](https://npm.io/package/kind-of.md) ^6.0.3 - [mime-db](https://npm.io/package/mime-db.md) ^1.48.0 - [onetime](https://npm.io/package/onetime.md) ^5.1.2 - [p-limit](https://npm.io/package/p-limit.md) ^2.3.0 - [pirates](https://npm.io/package/pirates.md) ^4.0.1 - [pkg-dir](https://npm.io/package/pkg-dir.md) ^4.2.0 - [private](https://npm.io/package/private.md) ^0.1.8 - [prompts](https://npm.io/package/prompts.md) ^2.4.1 - [rechoir](https://npm.io/package/rechoir.md) ^0.7.0 - [resolve](https://npm.io/package/resolve.md) ^1.20.0 - [tapable](https://npm.io/package/tapable.md) ^2.2.0 - [through](https://npm.io/package/through.md) ^2.3.8 - [v8flags](https://npm.io/package/v8flags.md) ^2.1.1 - [yallist](https://npm.io/package/yallist.md) ^4.0.0 - [anymatch](https://npm.io/package/anymatch.md) ^1.3.2 - [argparse](https://npm.io/package/argparse.md) ^1.0.10 - [arr-diff](https://npm.io/package/arr-diff.md) ^2.0.0 - [asynckit](https://npm.io/package/asynckit.md) ^0.4.0 - [chokidar](https://npm.io/package/chokidar.md) ^1.7.0 - [cssstyle](https://npm.io/package/cssstyle.md) ^2.3.0 - [emittery](https://npm.io/package/emittery.md) ^0.7.2 - [error-ex](https://npm.io/package/error-ex.md) ^1.3.2 - [escalade](https://npm.io/package/escalade.md) ^3.1.1 - [has-ansi](https://npm.io/package/has-ansi.md) ^2.0.0 - [has-flag](https://npm.io/package/has-flag.md) ^3.0.0 - [inflight](https://npm.io/package/inflight.md) ^1.0.6 - [inherits](https://npm.io/package/inherits.md) ^2.0.4 - [inquirer](https://npm.io/package/inquirer.md) ^7.3.3 - [isobject](https://npm.io/package/isobject.md) ^3.0.1 - [jest-cli](https://npm.io/package/jest-cli.md) ^26.6.3 - [make-dir](https://npm.io/package/make-dir.md) ^3.1.0 - [mimic-fn](https://npm.io/package/mimic-fn.md) ^2.1.0 - [minimist](https://npm.io/package/minimist.md) ^1.2.6 - [nice-try](https://npm.io/package/nice-try.md) ^1.0.5 - [p-locate](https://npm.io/package/p-locate.md) ^4.1.0 - [path-key](https://npm.io/package/path-key.md) ^3.1.1 - [preserve](https://npm.io/package/preserve.md) ^0.2.0 - [punycode](https://npm.io/package/punycode.md) ^2.1.1 - [react-is](https://npm.io/package/react-is.md) ^17.0.2 - [read-pkg](https://npm.io/package/read-pkg.md) ^5.2.0 - [readdirp](https://npm.io/package/readdirp.md) ^2.2.1 - [regjsgen](https://npm.io/package/regjsgen.md) ^0.5.2 - [to-regex](https://npm.io/package/to-regex.md) ^3.0.2 - [wildcard](https://npm.io/package/wildcard.md) ^2.0.0 - [xmlchars](https://npm.io/package/xmlchars.md) ^2.2.0 - [arr-union](https://npm.io/package/arr-union.md) ^3.1.0 - [call-bind](https://npm.io/package/call-bind.md) ^1.0.2 - [callsites](https://npm.io/package/callsites.md) ^3.1.0 - [camelcase](https://npm.io/package/camelcase.md) ^5.3.1 - [cli-width](https://npm.io/package/cli-width.md) ^3.0.0 - [colorette](https://npm.io/package/colorette.md) ^1.2.2 - [commander](https://npm.io/package/commander.md) ^2.20.3 - [commondir](https://npm.io/package/commondir.md) ^1.0.1 - [data-urls](https://npm.io/package/data-urls.md) ^2.0.0 - [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2 - [escodegen](https://npm.io/package/escodegen.md) ^2.0.0 - [esrecurse](https://npm.io/package/esrecurse.md) ^4.3.0 - [form-data](https://npm.io/package/form-data.md) ^3.0.1 - [get-value](https://npm.io/package/get-value.md) ^2.0.6 - [glob-base](https://npm.io/package/glob-base.md) ^0.3.0 - [has-value](https://npm.io/package/has-value.md) ^1.0.0 - [interpret](https://npm.io/package/interpret.md) ^2.2.0 - [invariant](https://npm.io/package/invariant.md) ^2.2.4 - [is-buffer](https://npm.io/package/is-buffer.md) ^1.1.6 - [is-docker](https://npm.io/package/is-docker.md) ^2.2.1 - [is-finite](https://npm.io/package/is-finite.md) ^1.1.0 - [is-number](https://npm.io/package/is-number.md) ^7.0.0 - [is-stream](https://npm.io/package/is-stream.md) ^2.0.0 - [jest-diff](https://npm.io/package/jest-diff.md) ^26.6.2 - [jest-each](https://npm.io/package/jest-each.md) ^26.6.2 - [jest-mock](https://npm.io/package/jest-mock.md) ^26.6.2 - [jest-util](https://npm.io/package/jest-util.md) ^26.6.2 - [js-tokens](https://npm.io/package/js-tokens.md) ^4.0.0 - [lru-cache](https://npm.io/package/lru-cache.md) ^6.0.0 - [makeerror](https://npm.io/package/makeerror.md) ^1.0.11 - [map-cache](https://npm.io/package/map-cache.md) ^0.2.2 - [map-visit](https://npm.io/package/map-visit.md) ^1.0.0 - [minimatch](https://npm.io/package/minimatch.md) ^3.0.4 - [nanomatch](https://npm.io/package/nanomatch.md) ^1.2.13 - [neo-async](https://npm.io/package/neo-async.md) ^2.6.2 - [os-tmpdir](https://npm.io/package/os-tmpdir.md) ^1.0.2 - [p-finally](https://npm.io/package/p-finally.md) ^1.0.0 - [picomatch](https://npm.io/package/picomatch.md) ^2.3.0 - [regex-not](https://npm.io/package/regex-not.md) ^1.0.2 - [repeating](https://npm.io/package/repeating.md) ^2.0.1 - [run-async](https://npm.io/package/run-async.md) ^2.4.1 - [set-value](https://npm.io/package/set-value.md) ^2.0.1 - [strip-bom](https://npm.io/package/strip-bom.md) ^4.0.0 - [strip-eof](https://npm.io/package/strip-eof.md) ^1.0.0 - [type-fest](https://npm.io/package/type-fest.md) ^0.21.3 - [user-home](https://npm.io/package/user-home.md) ^1.1.1 - [watchpack](https://npm.io/package/watchpack.md) ^2.2.0 - [word-wrap](https://npm.io/package/word-wrap.md) ^1.2.3 - [wrap-ansi](https://npm.io/package/wrap-ansi.md) ^6.2.0 - [acorn-walk](https://npm.io/package/acorn-walk.md) ^7.2.0 - [agent-base](https://npm.io/package/agent-base.md) ^6.0.2 - [ansi-regex](https://npm.io/package/ansi-regex.md) ^5.0.1 - [async-each](https://npm.io/package/async-each.md) ^1.0.3 - [cache-base](https://npm.io/package/cache-base.md) ^1.0.1 - [char-regex](https://npm.io/package/char-regex.md) ^1.0.2 - [cli-cursor](https://npm.io/package/cli-cursor.md) ^3.1.0 - [clone-deep](https://npm.io/package/clone-deep.md) ^4.0.1 - [color-name](https://npm.io/package/color-name.md) ^1.1.3 - [concat-map](https://npm.io/package/concat-map.md) ^0.0.1 - [decamelize](https://npm.io/package/decamelize.md) ^1.2.0 - [decimal.js](https://npm.io/package/decimal.js.md) ^10.2.1 - [didyoumean](https://npm.io/package/didyoumean.md) ^1.2.1 - [estraverse](https://npm.io/package/estraverse.md) ^5.2.0 - [fill-range](https://npm.io/package/fill-range.md) ^7.0.1 - [get-stream](https://npm.io/package/get-stream.md) ^5.2.0 - [has-values](https://npm.io/package/has-values.md) ^1.0.0 - [iconv-lite](https://npm.io/package/iconv-lite.md) ^0.4.24 - [is-dotfile](https://npm.io/package/is-dotfile.md) ^1.0.3 - [is-extglob](https://npm.io/package/is-extglob.md) ^1.0.0 - [is-windows](https://npm.io/package/is-windows.md) ^1.0.2 - [json-fixer](https://npm.io/package/json-fixer.md) ^1.6.10 - [micromatch](https://npm.io/package/micromatch.md) ^4.0.4 - [mime-types](https://npm.io/package/mime-types.md) ^2.1.31 - [mixin-deep](https://npm.io/package/mixin-deep.md) ^1.3.2 - [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.7 - [node-int64](https://npm.io/package/node-int64.md) ^0.4.0 - [optionator](https://npm.io/package/optionator.md) ^0.8.3 - [os-homedir](https://npm.io/package/os-homedir.md) ^1.0.2 - [parse-glob](https://npm.io/package/parse-glob.md) ^3.0.4 - [parse-json](https://npm.io/package/parse-json.md) ^5.2.0 - [pascalcase](https://npm.io/package/pascalcase.md) ^0.1.1 - [path-parse](https://npm.io/package/path-parse.md) ^1.0.7 - [prelude-ls](https://npm.io/package/prelude-ls.md) ^1.1.2 - [randomatic](https://npm.io/package/randomatic.md) ^3.1.1 - [regenerate](https://npm.io/package/regenerate.md) ^1.4.2 - [safe-regex](https://npm.io/package/safe-regex.md) ^1.1.0 - [shellwords](https://npm.io/package/shellwords.md) ^0.1.1 - [sisteransi](https://npm.io/package/sisteransi.md) ^1.0.5 - [snapdragon](https://npm.io/package/snapdragon.md) ^0.8.2 - [source-map](https://npm.io/package/source-map.md) ^0.5.7 - [sprintf-js](https://npm.io/package/sprintf-js.md) ^1.0.3 - [strip-ansi](https://npm.io/package/strip-ansi.md) ^6.0.0 - [trim-right](https://npm.io/package/trim-right.md) ^1.0.1 - [type-check](https://npm.io/package/type-check.md) ^0.3.2 - [whatwg-url](https://npm.io/package/whatwg-url.md) ^8.6.0 - [ansi-styles](https://npm.io/package/ansi-styles.md) ^3.2.1 - [arr-flatten](https://npm.io/package/arr-flatten.md) ^1.1.0 - [babel-types](https://npm.io/package/babel-types.md) ^6.26.0 - [buffer-from](https://npm.io/package/buffer-from.md) ^1.1.1 - [class-utils](https://npm.io/package/class-utils.md) ^0.3.6 - [cross-spawn](https://npm.io/package/cross-spawn.md) ^7.0.3 - [emoji-regex](https://npm.io/package/emoji-regex.md) ^8.0.0 - [emojis-list](https://npm.io/package/emojis-list.md) ^3.0.0 - [fb-watchman](https://npm.io/package/fb-watchman.md) ^2.0.1 - [fs.realpath](https://npm.io/package/fs.realpath.md) ^1.0.0 - [glob-parent](https://npm.io/package/glob-parent.md) ^2.0.0 - [graceful-fs](https://npm.io/package/graceful-fs.md) ^4.2.6 - [has-symbols](https://npm.io/package/has-symbols.md) ^1.0.2 - [home-or-tmp](https://npm.io/package/home-or-tmp.md) ^2.0.0 - [imurmurhash](https://npm.io/package/imurmurhash.md) ^0.1.4 - [is-arrayish](https://npm.io/package/is-arrayish.md) ^0.2.1 - [jest-config](https://npm.io/package/jest-config.md) ^26.6.3 - [jest-runner](https://npm.io/package/jest-runner.md) ^26.6.3 - [jest-worker](https://npm.io/package/jest-worker.md) ^26.6.2 - [locate-path](https://npm.io/package/locate-path.md) ^5.0.0 - [math-random](https://npm.io/package/math-random.md) ^1.0.4 - [mute-stream](https://npm.io/package/mute-stream.md) ^0.0.8 - [object-copy](https://npm.io/package/object-copy.md) ^0.1.0 - [object-keys](https://npm.io/package/object-keys.md) ^1.1.1 - [object.omit](https://npm.io/package/object.omit.md) ^2.0.1 - [object.pick](https://npm.io/package/object.pick.md) ^1.3.0 - [path-exists](https://npm.io/package/path-exists.md) ^4.0.0 - [randombytes](https://npm.io/package/randombytes.md) ^2.1.0 - [read-pkg-up](https://npm.io/package/read-pkg-up.md) ^7.0.1 - [regex-cache](https://npm.io/package/regex-cache.md) ^0.4.4 - [regjsparser](https://npm.io/package/regjsparser.md) ^0.6.9 - [resolve-cwd](https://npm.io/package/resolve-cwd.md) ^3.0.0 - [resolve-url](https://npm.io/package/resolve-url.md) ^0.2.1 - [safe-buffer](https://npm.io/package/safe-buffer.md) ^5.1.2 - [signal-exit](https://npm.io/package/signal-exit.md) ^3.0.3 - [stack-utils](https://npm.io/package/stack-utils.md) ^2.0.3 - [symbol-tree](https://npm.io/package/symbol-tree.md) ^3.2.4 - [type-detect](https://npm.io/package/type-detect.md) ^4.0.8 - [union-value](https://npm.io/package/union-value.md) ^1.0.1 - [unset-value](https://npm.io/package/unset-value.md) ^1.0.0 - [w3c-hr-time](https://npm.io/package/w3c-hr-time.md) ^1.0.2 - [yocto-queue](https://npm.io/package/yocto-queue.md) ^0.1.0 - [ajv-keywords](https://npm.io/package/ajv-keywords.md) ^3.5.2 - [ansi-escapes](https://npm.io/package/ansi-escapes.md) ^4.3.2 - [array-unique](https://npm.io/package/array-unique.md) ^0.2.1 - [browserslist](https://npm.io/package/browserslist.md) ^4.16.6 - [capture-exit](https://npm.io/package/capture-exit.md) ^2.0.0 - [core-util-is](https://npm.io/package/core-util-is.md) ^1.0.2 - [domexception](https://npm.io/package/domexception.md) ^2.0.1 - [eslint-scope](https://npm.io/package/eslint-scope.md) ^5.1.1 - [expand-range](https://npm.io/package/expand-range.md) ^1.8.2 - [html-escaper](https://npm.io/package/html-escaper.md) ^2.0.2 - [import-local](https://npm.io/package/import-local.md) ^3.0.2 - [is-primitive](https://npm.io/package/is-primitive.md) ^2.0.0 - [jest-resolve](https://npm.io/package/jest-resolve.md) ^26.6.2 - [jest-runtime](https://npm.io/package/jest-runtime.md) ^26.6.3 - [jest-watcher](https://npm.io/package/jest-watcher.md) ^26.6.2 - [loader-utils](https://npm.io/package/loader-utils.md) ^1.4.0 - [loose-envify](https://npm.io/package/loose-envify.md) ^1.4.0 - [merge-stream](https://npm.io/package/merge-stream.md) ^2.0.0 - [npm-run-path](https://npm.io/package/npm-run-path.md) ^4.0.1 - [object-visit](https://npm.io/package/object-visit.md) ^1.0.1 - [regexpu-core](https://npm.io/package/regexpu-core.md) ^4.7.1 - [resolve-from](https://npm.io/package/resolve-from.md) ^5.0.0 - [safer-buffer](https://npm.io/package/safer-buffer.md) ^2.1.2 - [schema-utils](https://npm.io/package/schema-utils.md) ^2.7.1 - [set-blocking](https://npm.io/package/set-blocking.md) ^2.0.0 - [spdx-correct](https://npm.io/package/spdx-correct.md) ^3.1.1 - [split-string](https://npm.io/package/split-string.md) ^3.1.0 - [string-width](https://npm.io/package/string-width.md) ^4.2.2 - [test-exclude](https://npm.io/package/test-exclude.md) ^6.0.0 - [tough-cookie](https://npm.io/package/tough-cookie.md) ^4.0.0 - [universalify](https://npm.io/package/universalify.md) ^0.1.2 - [which-module](https://npm.io/package/which-module.md) ^2.0.0 - [yargs-parser](https://npm.io/package/yargs-parser.md) ^18.1.3 - [acorn-globals](https://npm.io/package/acorn-globals.md) ^6.0.0 - [babel-helpers](https://npm.io/package/babel-helpers.md) ^6.24.1 - [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0 - [color-convert](https://npm.io/package/color-convert.md) ^1.9.3 - [detect-indent](https://npm.io/package/detect-indent.md) ^4.0.0 - [end-of-stream](https://npm.io/package/end-of-stream.md) ^1.4.4 - [function-bind](https://npm.io/package/function-bind.md) ^1.1.1 - [get-intrinsic](https://npm.io/package/get-intrinsic.md) ^1.1.1 - [human-signals](https://npm.io/package/human-signals.md) ^1.1.1 - [is-descriptor](https://npm.io/package/is-descriptor.md) ^1.0.2 - [is-extendable](https://npm.io/package/is-extendable.md) ^0.1.1 - [is-typedarray](https://npm.io/package/is-typedarray.md) ^1.0.0 - [jest-docblock](https://npm.io/package/jest-docblock.md) ^26.0.0 - [jest-get-type](https://npm.io/package/jest-get-type.md) ^26.3.0 - [jest-jasmine2](https://npm.io/package/jest-jasmine2.md) ^26.6.3 - [jest-snapshot](https://npm.io/package/jest-snapshot.md) ^26.6.2 - [jest-validate](https://npm.io/package/jest-validate.md) ^26.6.2 - [loader-runner](https://npm.io/package/loader-runner.md) ^4.2.0 - [node-notifier](https://npm.io/package/node-notifier.md) ^8.0.2 - [node-releases](https://npm.io/package/node-releases.md) ^1.1.73 - [object-assign](https://npm.io/package/object-assign.md) ^4.1.1 - [object.assign](https://npm.io/package/object.assign.md) ^4.1.2 - [p-each-series](https://npm.io/package/p-each-series.md) ^2.2.0 - [pretty-format](https://npm.io/package/pretty-format.md) ^26.6.2 - [repeat-string](https://npm.io/package/repeat-string.md) ^1.6.1 - [shallow-clone](https://npm.io/package/shallow-clone.md) ^3.0.1 - [shebang-regex](https://npm.io/package/shebang-regex.md) ^3.0.0 - [static-extend](https://npm.io/package/static-extend.md) ^0.1.2 - [string-length](https://npm.io/package/string-length.md) ^4.0.2 - [terminal-link](https://npm.io/package/terminal-link.md) ^2.1.1 - [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0 - [assign-symbols](https://npm.io/package/assign-symbols.md) ^1.0.0 - [babel-messages](https://npm.io/package/babel-messages.md) ^6.23.0 - [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0 - [babel-register](https://npm.io/package/babel-register.md) ^6.26.0 - [babel-template](https://npm.io/package/babel-template.md) ^6.26.0 - [babel-traverse](https://npm.io/package/babel-traverse.md) ^6.26.0 - [balanced-match](https://npm.io/package/balanced-match.md) ^1.0.2 - [core-js-compat](https://npm.io/package/core-js-compat.md) ^3.14.0 - [delayed-stream](https://npm.io/package/delayed-stream.md) ^1.0.0 - [detect-newline](https://npm.io/package/detect-newline.md) ^3.1.0 - [diff-sequences](https://npm.io/package/diff-sequences.md) ^26.6.2 - [extend-shallow](https://npm.io/package/extend-shallow.md) ^3.0.2 - [filename-regex](https://npm.io/package/filename-regex.md) ^2.0.1 - [find-cache-dir](https://npm.io/package/find-cache-dir.md) ^3.3.1 - [fragment-cache](https://npm.io/package/fragment-cache.md) ^0.2.1 - [glob-to-regexp](https://npm.io/package/glob-to-regexp.md) ^0.4.1 - [is-binary-path](https://npm.io/package/is-binary-path.md) ^1.0.1 - [is-core-module](https://npm.io/package/is-core-module.md) ^2.4.0 - [jest-haste-map](https://npm.io/package/jest-haste-map.md) ^26.6.2 - [normalize-path](https://npm.io/package/normalize-path.md) ^2.1.1 - [repeat-element](https://npm.io/package/repeat-element.md) ^1.1.4 - [restore-cursor](https://npm.io/package/restore-cursor.md) ^3.1.0 - [source-map-url](https://npm.io/package/source-map-url.md) ^0.4.1 - [string_decoder](https://npm.io/package/string_decoder.md) ^1.1.1 - [supports-color](https://npm.io/package/supports-color.md) ^5.5.0 - [to-object-path](https://npm.io/package/to-object-path.md) ^0.3.0 - [to-regex-range](https://npm.io/package/to-regex-range.md) ^5.0.1 - [util-deprecate](https://npm.io/package/util-deprecate.md) ^1.0.2 - [v8-to-istanbul](https://npm.io/package/v8-to-istanbul.md) ^7.1.2 - [babel-generator](https://npm.io/package/babel-generator.md) ^6.26.1 - [brace-expansion](https://npm.io/package/brace-expansion.md) ^1.1.11 - [combined-stream](https://npm.io/package/combined-stream.md) ^1.0.8 - [copy-descriptor](https://npm.io/package/copy-descriptor.md) ^0.1.1 - [define-property](https://npm.io/package/define-property.md) ^2.0.2 - [es-module-lexer](https://npm.io/package/es-module-lexer.md) ^0.4.1 - [expand-brackets](https://npm.io/package/expand-brackets.md) ^0.1.5 - [external-editor](https://npm.io/package/external-editor.md) ^3.1.0 - [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3 - [get-caller-file](https://npm.io/package/get-caller-file.md) ^2.0.5 - [hosted-git-info](https://npm.io/package/hosted-git-info.md) ^2.8.9 - [is-generator-fn](https://npm.io/package/is-generator-fn.md) ^2.1.0 - [is-plain-object](https://npm.io/package/is-plain-object.md) ^2.0.4 - [jest-regex-util](https://npm.io/package/jest-regex-util.md) ^26.0.0 - [jest-serializer](https://npm.io/package/jest-serializer.md) ^26.6.2 - [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8 - [natural-compare](https://npm.io/package/natural-compare.md) ^1.4.0 - [readable-stream](https://npm.io/package/readable-stream.md) ^2.3.7 - [shebang-command](https://npm.io/package/shebang-command.md) ^2.0.0 - [snapdragon-node](https://npm.io/package/snapdragon-node.md) ^2.1.1 - [snapdragon-util](https://npm.io/package/snapdragon-util.md) ^3.0.1 - [source-list-map](https://npm.io/package/source-list-map.md) ^2.0.1 - [spdx-exceptions](https://npm.io/package/spdx-exceptions.md) ^2.3.0 - [webpack-sources](https://npm.io/package/webpack-sources.md) ^2.3.0 - [whatwg-encoding](https://npm.io/package/whatwg-encoding.md) ^1.0.5 - [whatwg-mimetype](https://npm.io/package/whatwg-mimetype.md) ^2.3.0 - [babel-code-frame](https://npm.io/package/babel-code-frame.md) ^6.26.0 - [cjs-module-lexer](https://npm.io/package/cjs-module-lexer.md) ^0.6.0 - [collection-visit](https://npm.io/package/collection-visit.md) ^1.0.0 - [enhanced-resolve](https://npm.io/package/enhanced-resolve.md) ^5.8.2 - [fast-levenshtein](https://npm.io/package/fast-levenshtein.md) ^2.0.6 - [get-package-type](https://npm.io/package/get-package-type.md) ^0.1.0 - [http-proxy-agent](https://npm.io/package/http-proxy-agent.md) ^4.0.1 - [is-equal-shallow](https://npm.io/package/is-equal-shallow.md) ^0.1.3 - [is-posix-bracket](https://npm.io/package/is-posix-bracket.md) ^0.1.1 - [istanbul-reports](https://npm.io/package/istanbul-reports.md) ^3.0.2 - [output-file-sync](https://npm.io/package/output-file-sync.md) ^1.1.2 - [path-is-absolute](https://npm.io/package/path-is-absolute.md) ^1.0.1 - [spdx-license-ids](https://npm.io/package/spdx-license-ids.md) ^3.0.9 - [v8-compile-cache](https://npm.io/package/v8-compile-cache.md) ^2.3.0 - [babel-preset-jest](https://npm.io/package/babel-preset-jest.md) ^26.6.2 - [binary-extensions](https://npm.io/package/binary-extensions.md) ^1.13.1 - [component-emitter](https://npm.io/package/component-emitter.md) ^1.3.0 - [define-properties](https://npm.io/package/define-properties.md) ^1.1.3 - [https-proxy-agent](https://npm.io/package/https-proxy-agent.md) ^5.0.0 - [jest-message-util](https://npm.io/package/jest-message-util.md) ^26.6.2 - [jest-pnp-resolver](https://npm.io/package/jest-pnp-resolver.md) ^1.2.2 - [lines-and-columns](https://npm.io/package/lines-and-columns.md) ^1.1.6 - [require-directory](https://npm.io/package/require-directory.md) ^2.1.1 - [w3c-xmlserializer](https://npm.io/package/w3c-xmlserializer.md) ^2.0.0 - [write-file-atomic](https://npm.io/package/write-file-atomic.md) ^3.0.3 - [chrome-trace-event](https://npm.io/package/chrome-trace-event.md) ^1.0.3 - [convert-source-map](https://npm.io/package/convert-source-map.md) ^1.7.0 - [is-data-descriptor](https://npm.io/package/is-data-descriptor.md) ^1.0.0 - [jest-changed-files](https://npm.io/package/jest-changed-files.md) ^26.6.2 - [jest-leak-detector](https://npm.io/package/jest-leak-detector.md) ^26.6.2 - [jest-matcher-utils](https://npm.io/package/jest-matcher-utils.md) ^26.6.2 - [source-map-resolve](https://npm.io/package/source-map-resolve.md) ^0.5.3 - [source-map-support](https://npm.io/package/source-map-support.md) ^0.4.18 - [to-fast-properties](https://npm.io/package/to-fast-properties.md) ^2.0.0 - [webidl-conversions](https://npm.io/package/webidl-conversions.md) ^6.1.0 - [xml-name-validator](https://npm.io/package/xml-name-validator.md) ^3.0.0 - [collect-v8-coverage](https://npm.io/package/collect-v8-coverage.md) ^1.0.1 - [fastest-levenshtein](https://npm.io/package/fastest-levenshtein.md) ^1.0.12 - [istanbul-lib-report](https://npm.io/package/istanbul-lib-report.md) ^3.0.0 - [node-modules-regexp](https://npm.io/package/node-modules-regexp.md) ^1.0.0 - [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.7 - [strip-final-newline](https://npm.io/package/strip-final-newline.md) ^2.0.0 - [supports-hyperlinks](https://npm.io/package/supports-hyperlinks.md) ^2.2.0 - [decode-uri-component](https://npm.io/package/decode-uri-component.md) ^0.2.0 - [electron-to-chromium](https://npm.io/package/electron-to-chromium.md) ^1.3.752 - [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^1.0.5 - [fs-readdir-recursive](https://npm.io/package/fs-readdir-recursive.md) ^1.1.0 - [json-schema-traverse](https://npm.io/package/json-schema-traverse.md) ^0.4.1 - [process-nextick-args](https://npm.io/package/process-nextick-args.md) ^2.0.1 - [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^5.0.1 - [typedarray-to-buffer](https://npm.io/package/typedarray-to-buffer.md) ^3.1.5 - [babel-plugin-istanbul](https://npm.io/package/babel-plugin-istanbul.md) ^6.0.0 - [html-encoding-sniffer](https://npm.io/package/html-encoding-sniffer.md) ^2.0.1 - [istanbul-lib-coverage](https://npm.io/package/istanbul-lib-coverage.md) ^3.0.0 - [jest-environment-node](https://npm.io/package/jest-environment-node.md) ^26.6.2 - [regenerator-transform](https://npm.io/package/regenerator-transform.md) ^0.14.5 - [require-main-filename](https://npm.io/package/require-main-filename.md) ^2.0.0 - [spdx-expression-parse](https://npm.io/package/spdx-expression-parse.md) ^3.0.1 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.1.3 - [browser-process-hrtime](https://npm.io/package/browser-process-hrtime.md) ^1.0.0 - [is-accessor-descriptor](https://npm.io/package/is-accessor-descriptor.md) ^1.0.0 - [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^26.6.2 - [normalize-package-data](https://npm.io/package/normalize-package-data.md) ^2.5.0 - [babel-plugin-jest-hoist](https://npm.io/package/babel-plugin-jest-hoist.md) ^26.6.2 - [babel-plugin-syntax-jsx](https://npm.io/package/babel-plugin-syntax-jsx.md) ^6.18.0 - [is-fullwidth-code-point](https://npm.io/package/is-fullwidth-code-point.md) ^3.0.0 - [istanbul-lib-instrument](https://npm.io/package/istanbul-lib-instrument.md) ^4.0.3 - [posix-character-classes](https://npm.io/package/posix-character-classes.md) ^0.1.1 - [istanbul-lib-source-maps](https://npm.io/package/istanbul-lib-source-maps.md) ^4.0.0 - [json-parse-better-errors](https://npm.io/package/json-parse-better-errors.md) ^1.0.2 - [jest-resolve-dependencies](https://npm.io/package/jest-resolve-dependencies.md) ^26.6.3 - [remove-trailing-separator](https://npm.io/package/remove-trailing-separator.md) ^1.1.0 - [fast-json-stable-stringify](https://npm.io/package/fast-json-stable-stringify.md) ^2.1.0 - [validate-npm-package-license](https://npm.io/package/validate-npm-package-license.md) ^3.0.4 - [babel-plugin-polyfill-corejs2](https://npm.io/package/babel-plugin-polyfill-corejs2.md) ^0.2.2 - [babel-plugin-polyfill-corejs3](https://npm.io/package/babel-plugin-polyfill-corejs3.md) ^0.2.2 - [json-parse-even-better-errors](https://npm.io/package/json-parse-even-better-errors.md) ^2.3.1 - [regenerate-unicode-properties](https://npm.io/package/regenerate-unicode-properties.md) ^8.2.0 - [babel-helper-builder-react-jsx](https://npm.io/package/babel-helper-builder-react-jsx.md) ^6.26.0 - [babel-plugin-dynamic-import-node](https://npm.io/package/babel-plugin-dynamic-import-node.md) ^2.3.3 - [babel-preset-current-node-syntax](https://npm.io/package/babel-preset-current-node-syntax.md) ^1.0.1 - [is-potential-custom-element-name](https://npm.io/package/is-potential-custom-element-name.md) ^1.0.1 - [babel-plugin-polyfill-regenerator](https://npm.io/package/babel-plugin-polyfill-regenerator.md) ^0.2.2 - [unicode-match-property-ecmascript](https://npm.io/package/unicode-match-property-ecmascript.md) ^1.0.4 - [unicode-property-aliases-ecmascript](https://npm.io/package/unicode-property-aliases-ecmascript.md) ^1.1.0 - [babel-plugin-syntax-object-rest-spread](https://npm.io/package/babel-plugin-syntax-object-rest-spread.md) ^6.13.0 - [unicode-match-property-value-ecmascript](https://npm.io/package/unicode-match-property-value-ecmascript.md) ^1.2.0 - [unicode-canonical-property-names-ecmascript](https://npm.io/package/unicode-canonical-property-names-ecmascript.md) ^1.0.4 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.1 (latest) — 2024-03-17 - 1.0.0 — 2024-03-17 ## README # React Image File Resizer [![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-) [![Build Status](https://travis-ci.org/onurzorluer/react-image-file-resizer.svg?branch=master)](https://travis-ci.org/onurzorluer/react-image-file-resizer.svg?branch=master) [![npm version](https://badge.fury.io/js/react-image-file-resizer.svg)](https://badge.fury.io/js/react-image-file-resizer) `react-image-file-resizer` is a react module that can rescaled local images. - You can change image's width, height, format, rotation and quality. - It returns resized image's new base64 URI or Blob. The URI can be used as the source of an `` component. ## Setup Install the package: ``` npm i react-image-file-resizer ``` or ``` yarn add react-image-file-resizer ``` ## Usage ```javascript import Resizer from "react-image-file-resizer"; Resizer.imageFileResizer( file, // Is the file of the image which will resized. maxWidth, // Is the maxWidth of the resized new image. maxHeight, // Is the maxHeight of the resized new image. compressFormat, // Is the compressFormat of the resized new image. quality, // Is the quality of the resized new image. rotation, // Is the degree of clockwise rotation to apply to uploaded image. responseUriFunc, // Is the callBack function of the resized new image URI. outputType, // Is the output type of the resized new image. minWidth, // Is the minWidth of the resized new image. minHeight // Is the minHeight of the resized new image. ); ``` ## Example 1 First, wrap the resizer: ```javascript import Resizer from "react-image-file-resizer"; const resizeFile = (file) => new Promise((resolve) => { Resizer.imageFileResizer( file, 300, 300, "JPEG", 100, 0, (uri) => { resolve(uri); }, "base64" ); }); ``` And then use it in your async function: ```javascript const onChange = async (event) => { try { const file = event.target.files[0]; const image = await resizeFile(file); console.log(image); } catch (err) { console.log(err); } }; ``` ## Example 2 ```javascript import React, { Component } from "react"; import Resizer from "react-image-file-resizer"; class App extends Component { constructor(props) { super(props); this.fileChangedHandler = this.fileChangedHandler.bind(this); this.state = { newImage: "", }; } fileChangedHandler(event) { var fileInput = false; if (event.target.files[0]) { fileInput = true; } if (fileInput) { try { Resizer.imageFileResizer( event.target.files[0], 300, 300, "JPEG", 100, 0, (uri) => { console.log(uri); this.setState({ newImage: uri }); }, "base64", 200, 200 ); } catch (err) { console.log(err); } } } render() { return (
); } } export default App; ``` | Option | Description | Type | Required | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | | `file` | Path of image file | `object` | Yes | | `maxWidth` | New image max width (ratio is preserved) | `number` | Yes | | `maxHeight` | New image max height (ratio is preserved) | `number` | Yes | | `compressFormat` | Can be either **JPEG**, **PNG** or **WEBP**. | `string` | Yes | | `quality` | A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100) | `number` | Yes | | `rotation` | Degree of clockwise rotation to apply to the image. Rotation is limited to multiples of 90 degrees.(if no rotation is needed, just set it to 0) (0, 90, 180, 270, 360) | `number` | Yes | | `responseUriFunc` | Callback function of URI. Returns URI of resized image's base64 format. ex: `uri => {console.log(uri)});` | `function` | Yes | | `outputType` | Can be either **base64**, **blob** or **file**.(Default type is base64) | `string` | No | | `minWidth` | New image min width (ratio is preserved, defaults to null) | `number` | No | | `minHeight` | New image min height (ratio is preserved, defaults to null) | `number` | No | ## License [MIT](https://opensource.org/licenses/mit-license.html) ## Contributors Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
Ahmad Maleki
Ahmad Maleki
💻 🚧		 Martin Vyšňovský
Martin Vyšňovský
💻 🚧		 Nadun Chamikara
Nadun Chamikara
💻 🚧		 Shubham Zanwar
Shubham Zanwar
📖		 Onur Önder
Onur Önder
💻 🚧		 Yunus Emre
Yunus Emre
💻 🚧		 Juan
Juan
💻 🚧
Sreang Rathanak
Sreang Rathanak
💻 🚧		 Andres Rivera
Andres Rivera
💻 🚧		 mmmulani
mmmulani
💻 🚧		 Alex-1701
Alex-1701
🚧
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! --- _Source: https://npm.io/package/@gzup/react-image-file-resizer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._