{"id":20504512,"url":"https://github.com/candyframework/canvas-image-cropper","last_synced_at":"2026-06-05T17:31:48.005Z","repository":{"id":143743460,"uuid":"498559257","full_name":"candyframework/canvas-image-cropper","owner":"candyframework","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-01T02:04:17.000Z","size":167,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-01-16T07:54:39.842Z","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/candyframework.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":"2022-06-01T02:03:27.000Z","updated_at":"2022-06-01T02:04:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"edf8fca0-87e2-41e8-ae02-f95a3da29aec","html_url":"https://github.com/candyframework/canvas-image-cropper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/candyframework%2Fcanvas-image-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/candyframework%2Fcanvas-image-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/candyframework%2Fcanvas-image-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/candyframework%2Fcanvas-image-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/candyframework","download_url":"https://codeload.github.com/candyframework/canvas-image-cropper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242101978,"owners_count":20071987,"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-15T19:38:29.851Z","updated_at":"2025-12-02T23:02:09.544Z","avatar_url":"https://github.com/candyframework.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# canvas-image-cropper\n\nJavaScript image cropper based on canvas\n\n![preview](./demo/preview.png)\n\n# 安装\n\n```\nnpm install canvas-image-cropper\n```\n\n\n# 使用\n\n```\n\u003cdiv id=\"container\"\u003e\u003c/div\u003e\n\nvar canvasImageCropper = new CanvasImageCropper({\n    canvasWidth: 500,\n    canvasHeight: 500,\n    maskStyle: 'rgba(0, 0, 0, .6)',\n    clipWidth: 200,\n    clipHeight: 200\n});\ncanvasImageCropper.render(document.getElementById('container'), './foo.jpg');\n```\n\n# 参数说明\n\n```\ncanvasWidth  -- canvas 的大小 图片绘制宽度不会超过这个值\ncanvasHeight  -- canvas 的大小 图片绘制高度不会超过这个值\nmaskStyle  -- 遮罩样式\nclipWidth  -- 裁剪像素大小\nclipHeight  -- 裁剪像素大小\n```\n\n# API\n\n1. 获取裁剪坐标\n\n```\ncanvasImageCropper.getClipPosition()\n\n{ x: 0, y: 0, width: 200, height: 200 }\n```\n\n2. 获取裁剪区 base64 数据\n\n```\ncanvasImageCropper.getPreview()\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcandyframework%2Fcanvas-image-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcandyframework%2Fcanvas-image-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcandyframework%2Fcanvas-image-cropper/lists"}