{"id":30420770,"url":"https://github.com/skybrud/sky-crop","last_synced_at":"2025-08-22T08:20:13.085Z","repository":{"id":51869780,"uuid":"44095193","full_name":"skybrud/sky-crop","owner":"skybrud","description":"Vue module for dealing with cropping/scaling images from umbracos ImageProcessor","archived":false,"fork":false,"pushed_at":"2022-12-09T08:03:12.000Z","size":493,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-07-20T22:37:09.679Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/skybrud.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}},"created_at":"2015-10-12T08:46:43.000Z","updated_at":"2020-06-29T17:55:35.000Z","dependencies_parsed_at":"2023-01-25T12:20:13.260Z","dependency_job_id":null,"html_url":"https://github.com/skybrud/sky-crop","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"purl":"pkg:github/skybrud/sky-crop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-crop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-crop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-crop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-crop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skybrud","download_url":"https://codeload.github.com/skybrud/sky-crop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-crop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271606605,"owners_count":24788981,"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-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":"2025-08-22T08:20:08.233Z","updated_at":"2025-08-22T08:20:13.080Z","avatar_url":"https://github.com/skybrud.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sky-crop\n\u003e VueJS module for cropping images from umbraco imageprocessor (http://imageprocessor.org/imageprocessor-web/).\n\n\nOnly requirement is that the original size of the image is included in the url parameters.\n- ImageProcessor/Umbraco urls - eg. `[imagePath]?anchor=center\u0026height=600\u0026width=1000`\n\n\n-----\n## Installation\n```bash\nnpm install sky-crop\n```\nor\n```bash\nyarn add sky-crop\n```\n\n-----\n## Usage\nBegin by importing and installing the SkyCrop Vue plugin:\n```js\nimport Vue from 'vue';\nimport SkyCrop from 'sky-crop';\n\n// If you want to use the baseline scss add the following line\nimport '${YOUR-PROJECT-ROOT-PATH}/node_modules/sky-crop/dist/sky-crop.css';\n\nVue.use(SkyCrop);\n\n```\nThe `\u003csky-crop\u003e` component registers globally and can now be used.\n\nBasic example:\n``` html\n\u003csky-crop src=\"/your-image.png?anchor=center\u0026height=600\u0026width=1000\" /\u003e\n```\n\nAdvanced example:\n``` html\n\u003csky-crop\n  src=\"/your-image.png?anchor=center\u0026height=600\u0026width=1000\"\n  mode=\"cover\"\n  :round=\"100\"\n  :options=\"{ upscale: false }\"\n/\u003e\n```\n\n### Available attributes (optional):\nRead as *`attributeName=\"defaultValue\"` [supported types]*\n* `mode=\"width\"` [String] : 'width', 'height', 'cover', 'contain'\n* `:round=\"100\"` [Number]\n* `:options=\"{ upscale: false }\"`\n* `alt=\"alternative text\"` [String]\n\n\n### mode\nBest result will be given if the container has width and height set in css.\n\n\u003cu\u003e*width*\u003c/u\u003e\n\n* image will fill entire container width - height will be based on the image original ratio.\n* only `width` dimension is required in this mode.\n\n\u003cu\u003e*height*\u003c/u\u003e\n\n* image will fill entire container height - width will be based on the image original ratio.\n* only `height` dimension is required in this mode.\n\n\u003cu\u003e*contain*\u003c/u\u003e\n\n* image will always be fully visible.\n* `height` and `width` is required in this mode.\n\n\u003cu\u003e*cover*\u003c/u\u003e\n\n* image will fill entire container - overflow is hidden.\n* `height` and `width` is required in this mode.\n\n\n\n#### round\nIndication of how often you would like a recrop of your image.\n\n**Case:** image is loaded and starts with cropped dimensions at 350x350. At `round=\"100\"` should the image be stretch to more than `400` in width and/or `400` in height, a recrop will be initiated.\n\n#### options\nA hook for using all available methods provided by imageprocessor - for a full reference see this link: http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/\n\n#### alt\nNative `\u003cimg /\u003e` attribute, great for a11y.\n\n-------\n## Events:\nThe SkyCrop component emits two events:\n* `loaded` - when a cropped image finishes loading, the emitted data it the loaded src url.\n* `loading` - when fetching of a new crop is ongoing\n\n**Note:** These events can be triggered multiple times per component - for instance if the viewport is resized and a new crop is needed.\n\nExample:\n```html\n\u003csky-crop\n  src=\"/your-image.png?anchor=center\u0026height=600\u0026width=1000\"\n  mode=\"cover\"\n  round=\"200\"\n  @loaded=\"yourOnImageLoadedMethod\"\n  @loading=\"yourOnImageLoadingMethod\"\n/\u003e\n```\n\n-----\n## Credits\nThis module is made by the Frontenders at [skybrud.dk](http://www.skybrud.dk/). Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-crop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskybrud%2Fsky-crop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-crop/lists"}