{"id":20051940,"url":"https://github.com/sixem/imagerot","last_synced_at":"2025-06-26T20:34:28.373Z","repository":{"id":180566576,"uuid":"662287321","full_name":"sixem/imagerot","owner":"sixem","description":"💫 Apply unique effects to images in the browser or Node using image buffers","archived":false,"fork":false,"pushed_at":"2024-04-17T12:52:48.000Z","size":439,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T22:24:41.065Z","etag":null,"topics":["browser","buffers","datamosh","datamoshing","editing","filters","glitch","image","image-processing","modify","noise","web","weirdcore"],"latest_commit_sha":null,"homepage":"https://github.com/sixem/imagerot","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sixem.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-07-04T19:31:56.000Z","updated_at":"2025-03-25T13:10:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"81d6c171-0c7b-4530-af4f-e17bd7a886da","html_url":"https://github.com/sixem/imagerot","commit_stats":null,"previous_names":["sixem/imagerot"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sixem%2Fimagerot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sixem%2Fimagerot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sixem%2Fimagerot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sixem%2Fimagerot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sixem","download_url":"https://codeload.github.com/sixem/imagerot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252489134,"owners_count":21756266,"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":["browser","buffers","datamosh","datamoshing","editing","filters","glitch","image","image-processing","modify","noise","web","weirdcore"],"created_at":"2024-11-13T12:08:33.659Z","updated_at":"2025-05-05T11:32:05.754Z","avatar_url":"https://github.com/sixem.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ImageRot\n\n![cover](https://github.com/sixem/imagerot/assets/2825338/9c1901d4-76e1-44d4-9053-aa3ac044acdc)\n\n**ImageRot** (/ˈɪm.ɪdʒ.rɒt/ *noun*) is a lightweight, cross-environment image library for applying unique effects via raw image buffers.\n\nGet started by reading the [API documentation](https://github.com/sixem/imagerot/blob/main/API.md).\n\nCheck out the [Web UI](https://five.sh/imagerot/) if you want to test out different effects or modes!\n\n## Features\n### Cross-Environment Consistency\n* Achieves similar results in both Node and browser environments, ensuring good integration and usage across different environments.\n\n### Configurable Build\n* Allows for a custom build that only includes the desired effects or modes.\n\n### Web Worker Support\n* Compatible to be run within web workers in the browser, enabling smoother and improved performance.\n\n### Lightweight\n* Built with an emphasis on lightness, the package requires *zero* dependencies in the browser environment.\n\n## Browser usage\nFor use in the browser, the easiest way to get started is to use the pre-built source available in [dist](https://github.com/sixem/imagerot/blob/main/dist/).\n\nInclude the script in your HTML `\u003chead/\u003e` tag:\n```html\n\u003cscript type=\"text/javascript\" src=\"/dist/imagerot.min.js\"\u003e\u003c/script\u003e\n```\n\n## Node usage\nTo use it in Node, install it using NPM:\n```bash\nnpm install --save imagerot\n```\n\nImport the package:\n```js\nimport imagerot from 'imagerot';\n```\n\nIf you are targeting the browser, you can instead use:\n```js\nimport imagerot from 'imagerot/browser';\n```\n\n## Example Usage\nThe basic usage is the same in Node as it is in the browser.\n\nThe general workflow consists of staging (preparing) an input, then modifying it by applying different modes or [effects](https://github.com/sixem/imagerot/blob/main/EFFECTS.md):\n```js\nlet staged = await imagerot.stage({\n    // This can be a browser File, a pre-staged variable or even a Buffer returned from `fs`\n    data: file\n    // URLs are supported too:\n    //url: 'https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg'\n});\n```\nTo modify the staged variable:\n```js\n// Apply the `chimera` effect to the image\nstaged = await imagerot.useMode(staged, 'chimera');\n// Apply a `pixelate` effect to the image\nstaged = await imagerot.useEffect(staged, 'pixelate', { intensity: 50 });\n```\nThe project exports some environment-specific variables for both browser and Node, but in this example we'll only cover the basic ones.\n\nFor a more detailed overview of the available functions, refer to the [API documentation](https://github.com/sixem/imagerot/blob/main//API.md).\n\nTo display the modified image in the Browser, one can use `bufferToBlob()`:\n```js\nconst img = document.querySelector('img.output');\n// Convert the buffer to a Blob URL and display it\nimg.setAttribute('src', await imagerot.bufferToBlob(staged));\n```\n\nOr, to save the modified image in Node, you can use `saveBuffer()`\n```js\nconst output = `${Math.floor(Date.now() / 1000)}.png`;\nawait imagerot.saveBuffer(staged, output);\n```\n\n## Building\nYou can build the project from source yourself:\n```bash\ngit clone https://github.com/sixem/imagerot/\ncd imagerot\nnpm install\nnpm run build\n```\nThis will create both a `lib` for Node-usage and a `dist` with the packaged browser-compatible files.\n\nYou can also adjust the exported effects and modes before building, if you want to create a customized bundle.\n\n### Targeted Builds:\n* **Browser:** `npm run build:webpack`\n* **Node:** `npm run build:ts`\n\n## Disclaimer\nThis project has taken a lot of inspiration from [datamosh](https://github.com/Datamosh-js/datamosh), which is a similar project, so big thanks to the creator of that! 💖\n\nImageRot was created to provide a way to easily manipulate buffers in the browser. It puts a big focus on general effects, image editing, and the combination of effects and modes to create unique results! :sparkles:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsixem%2Fimagerot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsixem%2Fimagerot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsixem%2Fimagerot/lists"}