{"id":15357160,"url":"https://github.com/gera2ld/img-cropper","last_synced_at":"2025-06-12T11:33:08.088Z","repository":{"id":57272496,"uuid":"58215433","full_name":"gera2ld/img-cropper","owner":"gera2ld","description":"A lite image cropper based on canvas","archived":false,"fork":false,"pushed_at":"2016-12-30T09:07:47.000Z","size":33,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-05T01:39:19.880Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gera2ld.github.io/img-cropper","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/gera2ld.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":"2016-05-06T15:08:20.000Z","updated_at":"2017-01-05T02:51:01.000Z","dependencies_parsed_at":"2022-08-25T00:03:15.845Z","dependency_job_id":null,"html_url":"https://github.com/gera2ld/img-cropper","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/gera2ld/img-cropper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fimg-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fimg-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fimg-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fimg-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gera2ld","download_url":"https://codeload.github.com/gera2ld/img-cropper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fimg-cropper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259455736,"owners_count":22860423,"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":[],"created_at":"2024-10-01T12:33:37.462Z","updated_at":"2025-06-12T11:33:08.029Z","avatar_url":"https://github.com/gera2ld.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ImageCropper\n===\n![Bower](https://img.shields.io/bower/v/img-cropper.svg)\n![NPM](https://img.shields.io/npm/v/img-cropper.svg)\n![Downloads](https://img.shields.io/npm/dt/img-cropper.svg)\n\nInstallation\n---\n``` sh\n# Via NPM\n$ npm i img-cropper\n\n# Via Bower\n$ bower i img-cropper\n```\n\nUsage\n---\n``` js\nconst ImageCropper = require('img-cropper');\n\nconst cropper = ImageCropper.create({\n  container: document.getElementById('cropper'),\n  onCrop: cropData =\u003e {\n    canvasPreview.getContext('2d').drawImage(cropData.getCanvas(), 0, 0, 200, 200);\n  },\n});\n```\n\nDocuments\n---\n* *function* ImageCropper.create(options)\n\n  *options* have properties below:\n\n  * container: *Required*\n\n    DOM element to contain the cropper. The cropper will be intialized\n    with the width and height of its container if no `width` and\n    `height` is explicitly defined.\n\n  * width *(Optional)*\n\n    Maximum width of the cropper.\n    If not defined, `container.clientWidth` will be used.\n\n  * height *(Optional)*\n\n    Maximum height of the cropper.\n    If not defined, `container.clientHeight` will be used.\n\n  * minHeight *(Optional)*\n\n    Minimum height of the cropping rect, default as `5`.\n\n  * ratio *(Optional)*\n\n    The `width / height` ratio, default as `1`, `0` stands for unlimited.\n\n  * directions *(Optional)*\n\n    An array of resizer directions, default as `['nw', 'ne', 'sw', 'se']`.\n\n  * onCrop *(Optional)*\n\n    Function called with `cropData` when cropped image is updated.\n\n  * debounce *(Optional)*\n\n    Either `'mouseup'` or the number of time in milliseconds to debounce the `onCrop` call.\n\n  Returns an object with properties below:\n\n  * *function* reset(sourceImage, *(optional)* cropRect, *(optional)* callback)\n\n    `sourceImage` can be \u003cimg\u003e, \u003ccanvas\u003e, Blob or URL string.\n\n    `cropRect` can be an object with optional `x, y, width, height` properties.\n\n    `callback` will be called with a cachable \u003cimg\u003e if specified.\n\n  * *function* setRatio(ratio)\n\n  * *function* setDebounce(debounce)\n\n    `debounce` is the same as in options.\n\n  * *function* setRect(cropRect)\n\n    Modify the crop rect manually, the same as in `reset`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgera2ld%2Fimg-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgera2ld%2Fimg-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgera2ld%2Fimg-cropper/lists"}