{"id":13723503,"url":"https://github.com/ValentinH/svelte-easy-crop","last_synced_at":"2025-05-07T16:33:05.014Z","repository":{"id":37692324,"uuid":"183821430","full_name":"ValentinH/svelte-easy-crop","owner":"ValentinH","description":"A Svelte component to crop images with easy interactions","archived":false,"fork":false,"pushed_at":"2025-03-19T10:01:45.000Z","size":761,"stargazers_count":220,"open_issues_count":9,"forks_count":33,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-21T18:52:12.835Z","etag":null,"topics":["crop","crop-image","cropping","image-manipulation","svelte"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/svelte-easy-crop-basic-demo-q1005?file=/App.svelte","language":"TypeScript","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/ValentinH.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null},"funding":{"github":["ValentinH"]}},"created_at":"2019-04-27T21:03:22.000Z","updated_at":"2025-04-14T13:55:19.000Z","dependencies_parsed_at":"2024-10-25T09:45:43.437Z","dependency_job_id":"1354bc4a-ffbb-404a-bdd9-7787ab967e66","html_url":"https://github.com/ValentinH/svelte-easy-crop","commit_stats":{"total_commits":51,"total_committers":8,"mean_commits":6.375,"dds":0.7254901960784313,"last_synced_commit":"fd10dec5729d8d8c7e1919df4e5f11430fea507e"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ValentinH%2Fsvelte-easy-crop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ValentinH%2Fsvelte-easy-crop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ValentinH%2Fsvelte-easy-crop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ValentinH%2Fsvelte-easy-crop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ValentinH","download_url":"https://codeload.github.com/ValentinH/svelte-easy-crop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252915581,"owners_count":21824602,"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":["crop","crop-image","cropping","image-manipulation","svelte"],"created_at":"2024-08-03T01:01:42.314Z","updated_at":"2025-05-07T16:33:00.001Z","avatar_url":"https://github.com/ValentinH.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ValentinH"],"categories":["components and libraries"],"sub_categories":["images"],"readme":"# svelte-easy-crop\n\nA Svelte component to crop images with easy interactions\n\nThis is a rewrite of `react-easy-crop` (https://github.com/valentinh/react-easy-crop).\n\n[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] ![gzip size][gzip-badge] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]\n\n![svelte-easy-crop Demo](https://user-images.githubusercontent.com/2678610/41561426-365e7a44-734a-11e8-8e0e-1c04251f53e4.gif)\n\n## Demo\n\n- [Basic example](https://codesandbox.io/s/svelte-easy-crop-basic-demo-q1005?file=/App.svelte)\n\n## Features\n\n- Supports drag and zoom interactions\n- Provides crop dimensions as pixels and percentages\n- Supports any images format (JPEG, PNG, even GIF) as url or base 64 string\n- Mobile friendly\n\n## Installation\n\n```shell\nyarn add svelte-easy-crop\n```\n\nor\n\n```shell\nnpm install svelte-easy-crop --save\n```\n\n## Basic usage\n\n\u003e The Cropper is styled with `position: absolute` to take the full space of its parent.\n\u003e Thus, you need to wrap it with an element that uses `position: relative` or the Cropper will fill the whole page.\n\n```jsx\n\u003cscript\u003e\n import Cropper from 'svelte-easy-crop'\n\n let image = '/images/dog.jpeg'\n let crop = { x: 0, y: 0 }\n let zoom = 1\n\u003c/script\u003e\n\n\u003cCropper\n {image}\n bind:crop\n bind:zoom\n on:cropcomplete={e =\u003e console.log(e.detail)}\n/\u003e\n```\n\n## Props\n\n| Prop | Type | Required | Description |\n| :----------------- | :---------------------------------- | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `image` | string | ✓ | The image to be cropped. |\n| `crop` | `{ x: number, y: number }` | ✓ | Position of the image. `{ x: 0, y: 0 }` will center the image under the cropper. |\n| `zoom` | number | | Zoom of the image between `minZoom` and `maxZoom`. Defaults to 1. |\n| `aspect` | number | | Aspect of the cropper. The value is the ratio between its width and its height. The default value is `4/3` |\n| `minZoom` | number | | Minimum zoom of the image. Defaults to 1. |\n| `maxZoom` | number | | Maximum zoom of the image. Defaults to 3. |\n| `cropShape` | 'rect' \\| 'round' | | Shape of the crop area. Defaults to 'rect'. |\n| `cropSize` | `{ width: number, height: number }` | | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the image size. |\n| `showGrid` | boolean | | Whether to show or not the grid (third-lines). Defaults to `true`. |\n| `zoomSpeed` | number | | Multiplies the value by which the zoom changes. Defaults to 1. |\n| `crossOrigin` | string | | Allows setting the crossOrigin attribute on the image. |\n| `restrictPosition` | boolean | | Whether the position of the image should be restricted to the boundaries of the cropper. Useful setting in case of `zoom \u003c 1` or if the cropper should preserve all image content while forcing a specific aspect ratio for image throughout the application. Example: https://codesandbox.io/s/1rmqky233q. |\n\n# Events\n\n#### on:cropcomplete\n\nThis event is the one you should use to save the cropped area of the image. The `detail` property is an object with 2 values:\n\n1. `percent`: coordinates and dimensions of the cropped area in percentage of the image dimension\n1. `pixels`: coordinates and dimensions of the cropped area in pixels.\n\nBoth arguments have the following shape:\n\n```js\nconst area = {\n x: number, // x/y are the coordinates of the top/left corner of the cropped area\n y: number,\n width: number, // width of the cropped area\n height: number, // height of the cropped area\n}\n```\n\n## Development\n\n```shell\nyarn\nyarn dev\n```\n\nNow, open `http://localhost:5000` and start hacking!\n\n## License\n\n[MIT](https://github.com/ValentinH/svelte-easy-crop/blob/master/LICENSE)\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[version-badge]: https://img.shields.io/npm/v/svelte-easy-crop.svg?style=flat-square\n[package]: https://www.npmjs.com/package/svelte-easy-crop\n[downloads-badge]: https://img.shields.io/npm/dm/svelte-easy-crop.svg?style=flat-square\n[npmstats]: http://npm-stat.com/charts.html?package=svelte-easy-crop\u0026from=2018-06-18\n[npmstats-badge]: https://img.shields.io/npm/dm/svelte-easy-crop.svg?style=flat-square\n[gzip-badge]: http://img.badgesize.io/https://unpkg.com/svelte-easy-crop@1.0.0/index.js?compression=gzip\u0026style=flat-square\n[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n[license]: https://github.com/ValentinH/svelte-easy-crop/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FValentinH%2Fsvelte-easy-crop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FValentinH%2Fsvelte-easy-crop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FValentinH%2Fsvelte-easy-crop/lists"}