{"id":13445557,"url":"https://github.com/MattKetmo/darkroomjs","last_synced_at":"2025-03-20T21:30:53.523Z","repository":{"id":11576281,"uuid":"14065064","full_name":"MattKetmo/darkroomjs","owner":"MattKetmo","description":"Extensible image editing tool in your browser","archived":false,"fork":false,"pushed_at":"2024-03-24T07:04:09.000Z","size":6950,"stargazers_count":1384,"open_issues_count":56,"forks_count":406,"subscribers_count":35,"default_branch":"master","last_synced_at":"2024-04-24T13:55:23.457Z","etag":null,"topics":["fabricjs","image-crop","image-cropper","image-cropping","image-editing","image-editor","image-processing"],"latest_commit_sha":null,"homepage":"https://mattketmo.github.io/darkroomjs","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/MattKetmo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"publiccode":null,"codemeta":null}},"created_at":"2013-11-02T11:19:20.000Z","updated_at":"2024-05-27T15:35:46.770Z","dependencies_parsed_at":"2022-07-21T04:39:03.375Z","dependency_job_id":"9ff49b4c-a7dc-4a47-bf9a-58ccdb909e6c","html_url":"https://github.com/MattKetmo/darkroomjs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattKetmo%2Fdarkroomjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattKetmo%2Fdarkroomjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattKetmo%2Fdarkroomjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattKetmo%2Fdarkroomjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MattKetmo","download_url":"https://codeload.github.com/MattKetmo/darkroomjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221807733,"owners_count":16883639,"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":["fabricjs","image-crop","image-cropper","image-cropping","image-editing","image-editor","image-processing"],"created_at":"2024-07-31T05:00:35.919Z","updated_at":"2025-03-20T21:30:53.518Z","avatar_url":"https://github.com/MattKetmo.png","language":"JavaScript","funding_links":[],"categories":["Libraries","JavaScript"],"sub_categories":["Canvas draw"],"readme":"# DarkroomJS\n\n![License MIT](http://img.shields.io/badge/license-MIT-blue.svg)\n\nDarkroomJS is a JavaScript library which provides basic image editing tools in\nyour browser, such as **rotation** or **cropping**. It is based on the awesome\n[FabricJS](http://fabricjs.com/) library to handle images in HTML5 canvas.\n\n\n## ⚠️ IMPORTANT UPDATE\n\nThis library has been discontinued and is **no longer maintained**.\n\nIf you're looking for an alternative, you should have a look at **[Pintura Image Editor](https://www.ktm.sh/pintura)**.\n\n- framework agnostic\n- intuitive UI and mobile touch friendly\n- resizing / free rotating\n- color adjustment / photo filters\n- annotating support\n- and much more, [try the online demo](https://www.ktm.sh/pintura):\n\n[![Pintura Image Editor demo](demo/images/doka-image-editor-gh.gif?raw=true \"Pintura Image Editor (click on the image to view)\")](https://www.ktm.sh/pintura)\n\n[**[Demo] Try Pintura Image Editor →**](https://www.ktm.sh/pintura)\n\n## Building\n\n- Install [Node](http://nodejs.org/) \u0026 `npm`.\n- Run `npm install` to build dependencies.\n- Run `npm start` to build the assets and start the demo webserver.\n\n## Usage\n\nSimply instanciate a new Darkroom object with a reference to the image element:\n\n```html\n\u003cimg src=\"some-image.jpg\" id=\"target\"\u003e\n\u003cscript\u003e\n  new Darkroom('#target');\n\u003c/script\u003e\n```\n\nYou can also pass some options:\n\n```javascript\nnew Darkroom('#target', {\n  // Canvas initialization size\n  minWidth: 100,\n  minHeight: 100,\n  maxWidth: 500,\n  maxHeight: 500,\n\n  // Plugins options\n  plugins: {\n    crop: {\n      minHeight: 50,\n      minWidth: 50,\n      ratio: 1\n    },\n    save: false // disable plugin\n  },\n\n  // Post initialization method\n  initialize: function() {\n    // Active crop selection\n    this.plugins['crop'].requireFocus();\n\n    // Add custom listener\n    this.addEventListener('core:transformation', function() { /* ... */ });\n  }\n});\n```\n\n## Why?\n\nIt's easy to get a javascript script to crop an image in a web page.\nBut if your want more features like rotation or brightness adjustment, then you\nwill have to do it yourself. No more jQuery plugins here.\nIt only uses the power of HTML5 canvas to make what ever you want with your image.\n\n## The concept\n\nThe library is designed to be easily extendable. The core script only transforms\nthe target image to a canvas with a FabricJS instance, and creates an empty toolbar.\nAll the features are then implemented in separate plugins.\n\nEach plugin is responsible for creating its own functionality.\nButtons can easily be added to the toolbar and binded with those features.\n\n## Contributing\n\nRun `npm develop` to build and watch the files while developing.\n\n## FAQ\n\nHow can I access the edited image?\n\nIn order to get the edited image data, you must ask the canvas for it. By doing so inside the callback of your choice (in this case save), you can assign the edited image data to wherever you please.\n\n```javascript\nsave: {\n      callback: function() {\n          this.darkroom.selfDestroy(); // Cleanup\n          var newImage = dkrm.canvas.toDataURL();\n          fileStorageLocation = newImage;\n      }\n  }\n```\n\n## License\n\nDarkroomJS is released under the MIT License. See the [bundled LICENSE file](LICENSE)\nfor details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMattKetmo%2Fdarkroomjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMattKetmo%2Fdarkroomjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMattKetmo%2Fdarkroomjs/lists"}