{"id":13394310,"url":"https://github.com/nodeca/pica","last_synced_at":"2025-05-13T21:10:21.099Z","repository":{"id":20237671,"uuid":"23509696","full_name":"nodeca/pica","owner":"nodeca","description":"Resize image in browser with high quality and high speed","archived":false,"fork":false,"pushed_at":"2023-06-28T06:21:47.000Z","size":22432,"stargazers_count":3901,"open_issues_count":17,"forks_count":252,"subscribers_count":51,"default_branch":"master","last_synced_at":"2025-05-06T20:23:16.004Z","etag":null,"topics":["image","resize"],"latest_commit_sha":null,"homepage":"http://nodeca.github.io/pica/demo/","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/nodeca.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"open_collective":"puzrin","patreon":"puzrin","tidelift":"npm/pica"}},"created_at":"2014-08-31T08:44:32.000Z","updated_at":"2025-05-04T05:50:31.000Z","dependencies_parsed_at":"2023-09-27T03:36:43.031Z","dependency_job_id":null,"html_url":"https://github.com/nodeca/pica","commit_stats":{"total_commits":330,"total_committers":23,"mean_commits":"14.347826086956522","dds":"0.20606060606060606","last_synced_commit":"e4e661623a14160a824087c6a66059e3b6dba5a0"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodeca%2Fpica","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodeca%2Fpica/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodeca%2Fpica/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodeca%2Fpica/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nodeca","download_url":"https://codeload.github.com/nodeca/pica/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253365465,"owners_count":21897187,"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":["image","resize"],"created_at":"2024-07-30T17:01:15.612Z","updated_at":"2025-05-13T21:10:16.079Z","avatar_url":"https://github.com/nodeca.png","language":"JavaScript","readme":"pica - high quality image resize in browser\n===========================================\n\n[![CI](https://github.com/nodeca/pica/actions/workflows/ci.yml/badge.svg)](https://github.com/nodeca/pica/actions/workflows/ci.yml)\n[![NPM version](https://img.shields.io/npm/v/pica.svg)](https://www.npmjs.org/package/pica)\n\n\u003e Resize images in browser without pixelation and reasonably fast.\n\u003e Autoselect the best of available technologies: webworkers,\n\u003e webassembly, createImageBitmap, pure JS.\n\n[__demo__](http://nodeca.github.io/pica/demo/)\n\n\nWith pica you can:\n\n- Reduce upload size for large images, saving upload time.\n- Saves server resources on image processing.\n- Generate thumbnails in browser.\n- ...\n\n**Note. If you need File/Blob resize (from form's file input), consider use\n[image-blob-reduce](https://github.com/nodeca/image-blob-reduce).** It has\nadditional machinery to process orientation, keep EXIF metadata and so on.\n\n\nMigration from pica v6 to pica v7\n---------------------------------\n\nMultiply `unsharpAmount` by 2, divide `unsharpThreshold` by 2, example:\n\n - `pica@6`: `pica.resize(a, b, { unsharpAmount: 80, unsharpThreshold: 2 })`\n - `pica@7`: `pica.resize(a, b, { unsharpAmount: 160, unsharpThreshold: 1 })`\n\n\nPrior to use\n------------\n\nHere is a short list of problems you can face:\n\n- Loading image:\n  - Due to JS security restrictions, you can process images\n    from the same domain or local files only. If you load images from\n    remote domain use proper `Access-Control-Allow-Origin` header.\n  - iOS has a memory limits for canvas elements, that may cause\n    problems in some cases, [more details](https://github.com/nodeca/pica/wiki/iOS-Memory-Limit).\n  - If your source data is jpeg image, it can be rotated. Consider use\n    [image-blob-reduce](https://github.com/nodeca/image-blob-reduce).\n- Saving image:\n  - Some ancient browsers do not support `canvas.toBlob()` method.\n    Use `pica.toBlob()`, it includes required shim.\n  - For jpeg source, it's a good idea to keep `exif` data. Consider use\n    [image-blob-reduce](https://github.com/nodeca/image-blob-reduce).\n- Quality\n  - JS canvas does not support access to info about gamma correction.\n    Bitmaps have 8 bits per channel. That causes some quality loss,\n    because with gamma correction precision could be 12 bits per\n    channel.\n  - Precision loss will not be noticeable for ordinary images like\n    kittens, selfies and so on. But we don't recommend this library\n    for resizing professional quality images.\n\n\nInstall\n-------\n\n```sh\nnpm install pica\n```\n\n\nUse\n---\n\n```js\nconst pica = require('pica')();\n\n// Resize from Canvas/Image to another Canvas\npica.resize(from, to)\n  .then(result =\u003e console.log('resize done!'));\n\n// Resize \u0026 convert to blob\npica.resize(from, to)\n  .then(result =\u003e pica.toBlob(result, 'image/jpeg', 0.90))\n  .then(blob =\u003e console.log('resized to canvas \u0026 created blob!'));\n```\n\n\nAPI\n---\n\n### new Pica(config)\n\nCreate resizer instance with given config (optional):\n\n- __tile__ - tile width/height. Images are processed by regions,\n  to restrict peak memory use. Default 1024.\n- __features__ - list of features to use. Default is\n  `[ 'js', 'wasm', 'ww' ]`. Can be `[ 'js', 'wasm', 'cib', 'ww' ]`\n  or `[ 'all' ]`. Note, `cib` is buggy in Chrome and not supports default\n  `mks2013` filter.\n- __idle__ - cache timeout, ms. Webworkers create is not fast.\n  This option allow reuse webworkers effectively. Default 2000.\n- __concurrency__ - max webworkers pool size. Default is autodetected\n  CPU count, but not more than 4.\n- __createCanvas__ - function which returns a new canvas, used internally\n   by pica.\n   Default returns a [\\\u003ccanvas\\\u003e element](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API),\n   but this function could return an [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)\n   instead (to run pica in a Service Worker). Function signature: createCanvas(width: number, height: number): Canvas\n\n\n__Important!__ Latest browsers may support resize via [createImageBitmap](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap).\nThis feature is supported (`cib`) but disabled by default and not recommended\nfor use. So:\n\n- `createImageBitmap()` is used for non-blocking image decode (when available,\n  without downscale).\n- It's resize feature is blocked by default pica config. Enable it only on your\n  own risk. Result with enabled `cib` will depend on your browser. Result\n  without `cib` will be predictable and good.\n\n\n### .resize(from, to, options) -\u003e Promise\n\nResize image from one canvas (or image) to another. Sizes are\ntaken from source and destination objects.\n\n- __from__ - source, can be `Canvas`, `Image` or `ImageBitmap`.\n- __to__ - destination canvas, its size is supposed to be non-zero.\n- __options__ - quality (number) or object:\n  - __quality__ (deprecated, use `.filter` instead) - 0..3.\n  - __filter__ - filter name (Default - `mks2013`). See [resize_filter_info.js](https://github.com/nodeca/pica/blob/master/lib/mm_resize/resize_filter_info.js) for details. `mks2013` does both resize and sharpening, it's optimal and not recommended to change.\n  - __unsharpAmount__ - \u003e=0. Default = `0` (off). Usually\n    value between 100 to 200 is good. Note, `mks2013` filter already does\n    optimal sharpening.\n  - __unsharpRadius__ - 0.5..2.0. By default it's not set. Radius of Gaussian\n    blur. If it is less than 0.5, Unsharp Mask is off. Big values are clamped\n    to 2.0.\n  - __unsharpThreshold__ - 0..255. Default = `0`. Threshold for\n    applying unsharp mask.\n  - __cancelToken__ - Promise instance. If defined, current\n    operation will be terminated on rejection.\n\nResult is Promise, resolved with `to` on success.\n\n__(!)__ If you need to process multiple images, do it\nsequentially to optimize CPU \u0026 memory use. Pica already knows\nhow to use multiple cores (if browser allows).\n\n\n### .toBlob(canvas, mimeType [, quality]) -\u003e Promise\n\nConvenience method, similar to `canvas.toBlob()`, but with\npromise interface \u0026 polyfill for old browsers.\n\n\n### .resizeBuffer(options) -\u003e Promise\n\nSupplementary method, not recommended for direct use. Resize\nUint8Array with raw RGBA bitmap (don't confuse with\njpeg / png  / ... binaries). It does not use tiles \u0026 webworkers.\nLeft for special cases when you really need to process raw\nbinary data (for example, if you decode jpeg files \"manually\").\n\n- __options:__\n  - __src__ - Uint8Array with source data.\n  - __width__ - src image width.\n  - __height__ - src image height.\n  - __toWidth__ - output width, \u003e=0, in pixels.\n  - __toHeight__ - output height, \u003e=0, in pixels.\n  - __quality__ (deprecated, use `.filter` instead) - 0..3.\n  - __filter__ - filter name (Default - `mks2013`). See [resize_filter_info.js](https://github.com/nodeca/pica/blob/master/lib/mm_resize/resize_filter_info.js) for details. `mks2013` does both resize and sharpening, it's optimal and not recommended to change.\n  - __unsharpAmount__ - \u003e=0. Default = `0` (off). Usually\n    value between 100 to 200 is good. Note, `mks2013` filter already does\n    optimal sharpening.\n  - __unsharpRadius__ - 0.5..2.0. Radius of Gaussian blur.\n    If it is less than 0.5, Unsharp Mask is off. Big values are\n    clamped to 2.0.\n  - __unsharpThreshold__ - 0..255. Default = `0`. Threshold\n    for applying unsharp mask.\n  - __dest__ - Optional. Output buffer to write data,\n    if you don't wish `pica` to create new one.\n\nResult is Promise, resolved with resized rgba buffer.\n\n\n### What is \"quality\"\n\nPica has presets to adjust speed/quality ratio.\nSimply use `quality` option param:\n\n- 0 - Box filter, window 0.5px\n- 1 - Hamming filter, window 1.0px\n- 2 - Lanczos filter, window 2.0px\n- 3 - Lanczos filter, window 3.0px\n\nIn real world you will never need to change default (max)\nquality. All this variations were implemented to better\nunderstand resize math :)\n\n\n### Unsharp mask\n\nAfter scale down image can look a bit blured. It's good idea to sharpen it\na bit. Pica has built-in \"unsharp mask\" filter (off by default).\nSet `unsharpAmount` to positive number to activate the filter.\n\nFilter's parameters are similar to ones from Photoshop.\nWe recommend to start with `unsharpAmount = 160`,\n`unsharpRadius = 0.6` and `unsharpThreshold = 1`.\nThere is [a correspondence between UnsharpMask parameters\nin popular graphics software](https://github.com/nodeca/pica/wiki/Unsharp-mask-params-in-popular-softare).\n\n\nBrowser support\n----------------\n\nWe didn't have time to test all possible combinations, but in general:\n\n- Top level API should work in all browsers,\n  supporting [canvas](http://caniuse.com/#feat=canvas)\n  and [typed arrays](http://caniuse.com/#feat=typedarrays).\n- [Webworkers](http://caniuse.com/#feat=webworkers),\n  [WebAssembly](http://webassembly.org/) and\n  [createImageBitmap](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap)\n  are not required, but they will be used if available.\n- If you plan to use only pure math core,\n  then [typed arrays support](http://caniuse.com/#feat=typedarrays) will be enough.\n\n__Note.__ Though you can run this package on `node.js`, browsers\nare the main target platform. On server side we recommend to use\n[sharp](https://github.com/lovell/sharp).\n\n\nReferences\n----------\n\nYou can find these links useful:\n\n- discussions on stackoverflow:\n  [1](http://stackoverflow.com/questions/943781/),\n  [2](http://stackoverflow.com/questions/18922880/),\n  [3](http://stackoverflow.com/questions/2303690/).\n- chromium skia sources:\n  [image_operations.cc](http://src.chromium.org/svn/trunk/src/skia/ext/image_operations.cc),\n  [convolver.cc](http://src.chromium.org/svn/trunk/src/skia/ext/convolver.cc).\n\n\npica for enterprise\n-------------------\n\nAvailable as part of the Tidelift Subscription.\n\nThe maintainers of pica and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source packages you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact packages you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-pica?utm_source=npm-pica\u0026utm_medium=referral\u0026utm_campaign=enterprise\u0026utm_term=repo)\n","funding_links":["https://opencollective.com/puzrin","https://patreon.com/puzrin","https://tidelift.com/funding/github/npm/pica","https://tidelift.com/subscription/pkg/npm-pica?utm_source=npm-pica\u0026utm_medium=referral\u0026utm_campaign=enterprise\u0026utm_term=repo"],"categories":["JavaScript","Image Processing","Packages","包","Repository","Uncategorized","目录","语言资源库","Image Processing [🔝](#readme)","Image","图片处理"],"sub_categories":["Other","Image","图像","Uncategorized","图像处理","JavaScript","其它"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodeca%2Fpica","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnodeca%2Fpica","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodeca%2Fpica/lists"}