{"id":17579070,"url":"https://github.com/mlms13/imagecrop","last_synced_at":"2026-02-04T09:41:25.490Z","repository":{"id":15454198,"uuid":"18187207","full_name":"mlms13/imagecrop","owner":"mlms13","description":"ImageCrop is a simple canvas-based tool to help you crop images.","archived":false,"fork":false,"pushed_at":"2017-04-23T18:12:27.000Z","size":102,"stargazers_count":4,"open_issues_count":4,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-06T22:47:58.858Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlms13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-27T18:45:11.000Z","updated_at":"2021-10-23T19:54:17.000Z","dependencies_parsed_at":"2022-08-27T10:00:10.076Z","dependency_job_id":null,"html_url":"https://github.com/mlms13/imagecrop","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mlms13/imagecrop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2Fimagecrop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2Fimagecrop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2Fimagecrop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2Fimagecrop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlms13","download_url":"https://codeload.github.com/mlms13/imagecrop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2Fimagecrop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266586409,"owners_count":23952172,"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-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":[],"created_at":"2024-10-22T00:43:32.165Z","updated_at":"2026-02-04T09:41:25.415Z","avatar_url":"https://github.com/mlms13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ImageCrop\n=========\n\nImageCrop is a simple canvas-based for client-side image cropping. It has no external dependencies, and it should work reasonably well in all browsers that support `canvas` (though it hasn't been thoroughly tested).\n\nImageCrop is inspired by tools like [Jcrop](http://deepliquid.com/content/Jcrop.html) (but without depending on jQuery) and [ImageCutter](http://www.joustmultimedia.com/blog/post/image_cutter) (but without the emphasis on a server to do the actual cropping). [CanvasCropper](https://github.com/codepo8/canvascropper) and [this HTML5 image crop tool](http://www.script-tutorials.com/html5-image-crop-tool) were the starting points for the code in this library.\n\n## Usage\n\n### Setup\n\nYour HTML only needs to have an image that you are capable of selecting in some way:\n\n```html\n\u003cimg class=\"myImg\" src=\"/path/to/image.png\" alt=\"My image\"\u003e\n```\n\nSomewhere near the end of your document, include the `imagecrop.js` script and initialize the plugin on an image. You'll want to make sure the image has completely loaded before firing up the plugin. **Watch out!** This can be tricky if the browser is loading the image from cache, as the image may load before the `load` event listener is set. You may want to make use of a library like [imagesloaded](https://github.com/desandro/imagesloaded) to ensure that your images have completely loaded.\n\n```html\n\u003cscript src=\"/js/imagecrop.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  document.querySelector('.myImg').addEventListener('load', function (e) {\n    // now that the image has fully loaded, initialize the plugin\n    var cropper = new ImageCrop({\n      // tell ImageCrop which image to crop,\n      // the target of the `load` event in this case\n      image: e.target\n    });\n  });\n\u003c/script\u003e\n```\n\n### Methods and Public Properties\n\n| Method or Property | Result                                                                                           |\n|--------------------|--------------------------------------------------------------------------------------------------|\n| `save()`           | Returns a PNG image representing the current crop selection.                                     |\n| `set(prop, val)`   | Update options after `init` by passing a property and value, or object containing multiple.      |\n| `cropCoords`       | An object with `x`, `y`, `width`, and `height` properties related to the current crop selection. |\n| `draw(layer)`      | Redraw the canvas layer after you've changed `cropCoords`.                                       |\n\n## Options\n\n| Option         | Type    | Default                   | Comment                                                          |\n|----------------|---------|---------------------------|------------------------------------------------------------------|\n| `image`        | element | `document.querySelector(\"img.imagecrop\")` | Pass in an element for your image.               |\n| `initialFill`  | string  | `\"rgba(0, 0, 0, 0.1)\"`    | Color value to overlay on the base canvas.                       |\n| `activeFill`   | string  | `\"rgba(0, 0, 0, 0.6)\"`    | Color value of the background once a selection is drawn.         |\n| `outputWidth`  | number  | `false`                   | A target width for the cropped file.                             |\n| `outputHeight` | number  | `false`                   | A target height for the cropped file.                            |\n| `ratio`        | number  | `false`*                  | A fixed ratio representing `width` / `height`.                   |\n| `handleSize`   | number  | `10`                      | Size in pixels of the square resize handles.                     |\n| `handleFill`   | string  | `\"rgba(0, 0, 0, 0.65)\"`   | Fill color of resize handles.                                    |\n| `keyboard`     | boolean | `true`                    | Allow keyboard interaction with the Canvas                       |\n| `keyboardStep` | number  | `5`                       | Number of pixels the keyboard keys should move the selection.    |\n| `imageType`    | string  | `'image/png'`             | MIME-Type of the output image when you use the `.save()` method. |\n| `imageQuality` | number  | `1.0`                     | Quality of the image from `0.0` - `1.0`.                         |\n| `dragThreshold`| number  | `1`                       | Size in pixels the selection needs to be in order to show up.    |\n\n\n* If an `outputWidth` and `outputHeight` are set, ratio will be set automatically, regardless of whether a `ratio` is passed to the constructor. Height and width win, but if a ratio is set later using the `.set()` method, height and width will be ignored when the image is saved (to avoid skewed images).\n\n## Caveats\n\n- ImageCrop probably doesn't work with Canvas polyfills for old IE, because they don't generally work well with the `drawImage()` method, which is used heavily in this library\n- Images loaded from other domains probably won't work, due to the way browsers protect against cross-origin attacks\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlms13%2Fimagecrop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlms13%2Fimagecrop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlms13%2Fimagecrop/lists"}