{"id":21879021,"url":"https://github.com/tato30/vue-polygon-cropper","last_synced_at":"2025-03-22T00:15:53.480Z","repository":{"id":237587881,"uuid":"779851961","full_name":"TaTo30/vue-polygon-cropper","owner":"TaTo30","description":"A cropper built in top of fabric.js","archived":false,"fork":false,"pushed_at":"2024-06-06T03:55:12.000Z","size":1365,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-16T14:49:49.997Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/TaTo30.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-31T00:38:04.000Z","updated_at":"2024-07-25T05:06:04.000Z","dependencies_parsed_at":"2024-06-19T02:59:30.414Z","dependency_job_id":null,"html_url":"https://github.com/TaTo30/vue-polygon-cropper","commit_stats":null,"previous_names":["tato30/vue-polygon-cropper"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-polygon-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-polygon-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-polygon-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-polygon-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TaTo30","download_url":"https://codeload.github.com/TaTo30/vue-polygon-cropper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244885697,"owners_count":20526296,"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-11-28T08:14:33.241Z","updated_at":"2025-03-22T00:15:53.462Z","avatar_url":"https://github.com/TaTo30.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=300 src=\"./docs/logo.png\" /\u003e\n  \u003ch1\u003evue-polygon-cropper\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2\u003e\u003ca href=\"https://stackblitz.com/edit/vitejs-vite-urtqie?file=src%2FApp.vue\"\u003e⚡Try on StackBlitz!\u003c/a\u003e\u003c/h2\u003e\n\u003c/div\u003e\n\n\u003e [!WARNING]\n\u003e This component is still in development and only a early version with basic features have been released. Any recommendation, feature propose or bug report feel free to open an Issue or PR 😊\n\n## Introduction\n\nvue-polygon-cropper is a **Vue 3** component built-in in top of `fabric.js` to crop an image in polygon shapes.\n\n\n## Installation\n\n```shell\nnpm i @tato30/vue-polygon-cropper\n```\n```shell\nyarn add @tato30/vue-polygon-cropper\n```\n\n## Basic Usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue';\nimport { VuePolygonCropper } from '@tato30/vue-polygon-cropper'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cvue-polygon-cropper src=\"https://domain/images/image1.jpg\" :width=\"500\" /\u003e\n\u003c/template\u003e\n```\n\n## Props\n\n### src\n\nType: `string` \u003cbr /\u003e\nRequired: `true`\n\nThe URL to create an image from.\n\n```vue\n\u003cvue-polygon-cropper src=\"https://domain/images/image1.jpg\" /\u003e\n```\n\n### width\n\nType: `number` \u003cbr /\u003e\nRequired: `false`\n\nThe width to scale the image on the canvas element, otherwise the canvas will render with the image dimensions.\n\n\u003cvue-polygon-cropper src=\"https://domain/images/image1.jpg\" :width=\"500\" /\u003e\n\n### height\n\nType: `number` \u003cbr /\u003e\nRequired: `false`\n\nThe height to scale the image on the canvas element, otherwise the canvas will render with the image dimensions.\n\nThis prop has less precedence than `width`.\n\n\u003cvue-polygon-cropper src=\"https://domain/images/image1.jpg\" :height=\"700\" /\u003e\n\n### no-background\n\nType: `boolean` \u003cbr /\u003e\nDefault: `false` \u003cbr /\u003e\nRequired: `false`\n\nRemove the background shape.\n\n\u003cvue-polygon-cropper src=\"https://domain/images/image1.jpg\" no-background /\u003e\n\n### background-color\n\nType: `string` \u003cbr /\u003e\nDefault: `rgba(0, 0, 0, 0.7)` \u003cbr /\u003e\nRequired: `false`\n\nSet the background color.\n\n\u003cvue-polygon-cropper src=\"https://domain/images/image1.jpg\" background-color=\"#FF5733FA\" /\u003e\n\n### points\n\nType: `array` \u003cbr /\u003e\nRequired: `false`\n\nAn array of cartesian points to shape an initial polygon on the image, the points must be calculated in base of the image's dimensions and can be set `1` or `n` points.\n\nBy default, the component creates four points for each corner of the image.\n\n```vue\n\u003cvue-polygon-cropper\n  src=\"https://domain/images/image1.jpg\" \n  :points=\"[\n    { x: 149, y: 1626 },\n    { x: 1321, y: 1248 },\n    { x: 1437, y: 41 },\n    { x: 132, y: 212 },\n    { x: 723, y: 920 },\n    { x: 1202, y: 928 }\n  ]\"\n/\u003e\n```\n\n### lines\n\nType: `object | Line` \u003cbr /\u003e\nRequired: `false`\n\nSpecify the style of the lines drawn between points.\n\nDefault (All properties are optional):\n\n```json\n{\n  \"color\": \"white\", // Line color\n  \"width\": 1.5, // Line width in px\n  \"dash\": [7, 5] // Dash array [dash, space], use [0, 0] for a thin line, in px\n}\n```\n\n```vue\n\u003cvue-polygon-cropper\n  src=\"https://domain/images/image1.jpg\" \n  :lines=\"{\n    width: 1,\n    dash: [0, 0] \n  }\"\n/\u003e\n```\n\n\n### handlers\n\nType: `object | Handler` \u003cbr /\u003e\nRequired: `false`\n\nSpecify the style of the handlers drawn by each point.\n\nDefault (All properties are optional):\n\n```json\n{\n  \"type\": \"rect\", // Shape: \"circle\" or \"rect\"\n  \"color\": \"white\", // Shape's fill color\n  \"borderColor\": \"#78a6f1\", // Shape's border color\n  \"borderWidth\": 0.5, // Shape's border width in px\n  \"padding\": 10, // Padding of the movable area of the handler in px\n  \"width\": 10, // Width of the 'rect' handler in px\n  \"height\": 10, // Height of the 'rect' handler in px\n  \"radius\": 5, // Radius of the 'circle' handler in px\n}\n```\n\n```vue\n\u003cvue-polygon-cropper\n  src=\"https://domain/images/image1.jpg\" \n  :handlers=\"{\n    borderWidth: 1,\n    padding: 15,\n    width: 7,\n    height: 7,\n  }\"\n/\u003e\n```\n\n## Events\n\n### loaded\n\nEmitted once the image has been loaded.\n\n```vue\n\u003cvue-polygon-cropper src=\"https://domain/images/image1.jpg\" @loaded=\"onLoaded\" /\u003e\n```\n\n### moving\n\nEmitted when a point has been moved.\n\n```vue\n\u003cvue-polygon-cropper src=\"https://domain/images/image1.jpg\" @loaded=\"onMoving\" /\u003e\n```\n\nThe payload value contains the coordinates of all points in the canvas and scaled to image's dimensions\n\nExample:\n\n```json\n{\n  // Coordinates based on canvas\n  \"canvas\": [ \n    {\n      x: 120,\n      y: 52\n    },\n    {\n      x: 620,\n      y: 80\n    },\n    {\n      x: 690,\n      y: 240\n    },\n    {\n      x: 90,\n      y: 300\n    }\n  ],\n  // Coordinates scaled in base image's dimensions (scale: 2, in this example)\n  \"image\": { \n    {\n      x: 240,\n      y: 104\n    },\n    {\n      x: 1240,\n      y: 160\n    },\n    {\n      x: 1380,\n      y: 480\n    },\n    {\n      x: 180,\n      y: 600\n    }\n  }\n}\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftato30%2Fvue-polygon-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftato30%2Fvue-polygon-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftato30%2Fvue-polygon-cropper/lists"}