{"id":19885558,"url":"https://github.com/grinat/browser-image-manipulation","last_synced_at":"2025-08-22T20:12:22.753Z","repository":{"id":31958423,"uuid":"130566629","full_name":"grinat/browser-image-manipulation","owner":"grinat","description":"Convert and manipulate image on JS in browser.","archived":false,"fork":false,"pushed_at":"2023-01-05T14:56:34.000Z","size":3134,"stargazers_count":10,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-12T13:27:04.562Z","etag":null,"topics":["crop","drawing","effects","image","manipulation","resize"],"latest_commit_sha":null,"homepage":"https://grinat.github.io/browser-image-manipulation/examples/index.html","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/grinat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-22T12:47:09.000Z","updated_at":"2023-03-30T20:17:18.000Z","dependencies_parsed_at":"2023-01-14T20:12:25.182Z","dependency_job_id":null,"html_url":"https://github.com/grinat/browser-image-manipulation","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/grinat/browser-image-manipulation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grinat%2Fbrowser-image-manipulation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grinat%2Fbrowser-image-manipulation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grinat%2Fbrowser-image-manipulation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grinat%2Fbrowser-image-manipulation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grinat","download_url":"https://codeload.github.com/grinat/browser-image-manipulation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grinat%2Fbrowser-image-manipulation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270078161,"owners_count":24523314,"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","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["crop","drawing","effects","image","manipulation","resize"],"created_at":"2024-11-12T17:34:55.525Z","updated_at":"2025-08-12T14:40:11.441Z","avatar_url":"https://github.com/grinat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## browser-image-manipulation\nConvert and manipulate image on JS in browser. Fluent interface based, at end returning promise.\n\n### Install\n```\nnpm install browser-image-manipulation --save\n```\n\n### Examples\n[Open](https://grinat.github.io/browser-image-manipulation/examples/index.html) (see in /examples)\n\n### Features\nLoad image in formats:\n- blob (optional, with image orientation detect and correct rotate)\n- canvas\n\nFilters:\n- grayscale\n- pixelize\n- gaussian blur (used [StackBlur.js](https://github.com/flozz/StackBlur))\n\nManipulations:\n- rotate\n- crop\n- crop to circle with resize\n- crop to square with resize\n- resize by max height/max width (used [pica](https://github.com/nodeca/pica) for correct resize image)\n- resize to fit in rectangle (proportion saved, empty space filled by color)\n- perspective (change perspective of image)\n\nDraw:\n- draw line\n- draw polygon\n- draw rectangle\n- draw text\n\nOutput formats:\n- blob\n- canvas\n- base64 image\n\nInfo:\n- get exif (only for blob)\n\n### Usage\nOne format:\n```js\nimport BrowserImageManipulation from 'browser-image-manipulation'\n\nnew BrowserImageManipulation()\n   .loadBlob(e.target.files[0], {\n       fixOrientation: true // about problem: https://www.howtogeek.com/254830/why-your-photos-dont-always-appear-correctly-rotated/\n   })\n   .gaussianBlur()\n   .saveAsImage()\n   .then(base64 =\u003e {\n      alert('Blured done!')\n   })\n   .catch(e =\u003e alert(e.toString()))\n```\nMulti format:\n```js\nimport BrowserImageManipulation from 'browser-image-manipulation'\n\nlet picaOptions = {} // optional, see pica options\nlet iM = new BrowserImageManipulation()\n            .loadBlob(e.target.files[0])\n            .toCircle(300, {pica: picaOptions})\n            .toGrayscale()\n            \niM.saveAsBlob().then(blob =\u003e {\n    if (blob.size \u003e 3000000) {\n        return new Error('Max size 3 mb')\n    }\n    // uploadToServer(blob, 'my circle black and white image')\n    return iM.saveAsImage()\n}).then(base64 =\u003e {\n    document.getElementByTag('img')[0].src = base64\n}).catch(e =\u003e alert(e.toString()))\n```\n\nFluent interface:\n```js\nnew BrowserImageManipulation()\n    .loadBlob(e.target.files[0])\n    .toCircle(400)\n    .toGrayscale()\n    .pixelize()\n    .rotate(90)\n    .saveAsImage()\n    .then(base64 =\u003e {\n        document.getElementById('exampleFluentImg').src = base64\n    }).catch(e =\u003e alert(e.toString()))\n```\n\n### Increase performance\n#### Minify\nUse wasm features in resize methods:\n```js\nnew BrowserImageManipulation()\n    .loadBlob(e.target.files[0])\n    .toCircle(400, {\n        picaInit: {\n            features: ['js', 'wasm'] // \u003c--- set features\n        }\n    })\n    \nnew BrowserImageManipulation()\n    .loadBlob(e.target.files[0])\n    .resize(400, 400, {\n        picaInit: {\n            features: ['js', 'wasm'] // \u003c--- set features\n        }\n    }) \n   \n// ...and etc resize methods    \n\n```\n\nBut if use UglifyJs/TerserJS set in compress evaluate to false\n```\ncompress: {\n  ...\n  evaluate: false\n  ...\n}\n```\n\nWithout that, you can see error like:\n```\nUncaught ReferenceError: e is not defined\n    at t (217c2170-1eb8-41b8-b91c-c3d57f706ea9:1)\n```\n\n### Ie 11 support\nFor work in ie 11 you need some polyfils from core-js\n```\nimport 'core-js/modules/es.object.assign'\nimport 'core-js/modules/es.promise'\nimport 'core-js/modules/es.array.iterator'\n```\n\nIn the versions below, the work was not tested. \nPerhaps everything will work if you add polyfills and use only js features:\n```\n.resize(400, 400, {\n        picaInit: {\n            features: ['js'] // \u003c--- only js feature\n        }\n    }) \n``` \n\n### Development\n```\n# install deps\nnpm i\n\n# run in dev mode\nnpm run dev\n```\n\nand go to /examples/index.html and open in web-browser\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrinat%2Fbrowser-image-manipulation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrinat%2Fbrowser-image-manipulation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrinat%2Fbrowser-image-manipulation/lists"}