{"id":13835828,"url":"https://github.com/andyshora/angular-image-crop","last_synced_at":"2026-02-23T14:32:46.909Z","repository":{"id":17872177,"uuid":"20810067","full_name":"andyshora/angular-image-crop","owner":"andyshora","description":"A better way to crop images client-side using AngularJS","archived":false,"fork":false,"pushed_at":"2020-04-13T14:41:33.000Z","size":306,"stargazers_count":359,"open_issues_count":25,"forks_count":86,"subscribers_count":14,"default_branch":"master","last_synced_at":"2026-01-24T06:23:20.982Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://andyshora.com/angular-image-cropper.html","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/andyshora.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":"2014-06-13T16:12:37.000Z","updated_at":"2025-03-26T04:42:02.000Z","dependencies_parsed_at":"2022-08-04T21:15:45.122Z","dependency_job_id":null,"html_url":"https://github.com/andyshora/angular-image-crop","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/andyshora/angular-image-crop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyshora%2Fangular-image-crop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyshora%2Fangular-image-crop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyshora%2Fangular-image-crop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyshora%2Fangular-image-crop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andyshora","download_url":"https://codeload.github.com/andyshora/angular-image-crop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyshora%2Fangular-image-crop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29745584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":"2024-08-04T15:00:20.633Z","updated_at":"2026-02-23T14:32:46.891Z","avatar_url":"https://github.com/andyshora.png","language":"JavaScript","readme":"Angular Image Crop\n==================\n\nI'm attempting to make a self-contained AngularJS Directive which will allow you to crop an image before it's uploaded to the server.\n\n# Features\n\n* Touch support, swipe to move and drag handle to zoom  - see known issues\n* Add any image file from your device/machine\n* Output as a base64-encoded data uri\n* Uses HTML5 Canvas to display image in a flexible context, to allow dragging and zooming.\n* Note that regardless of the shape of the cropping guideline, resulting images will be square. For example, using the 'circle' shape parameter will show a circular guide, but the resulting images will have to be masked when rendering to the user.\n\n# Browser Support\n* IE10+, Android 3+, iOS 6+, basically all modern browsers!\n\n# Usage\n\n1. Add the dependency : `angular.module('myApp',['ImageCropper'])`\n2. Include the stylesheet\n3. Initiatlise the directive [see standalone JSBin](http://jsbin.com/fovovu/1/edit?javascript,output) for example code.\n\n## Parameters\n\n* width (string) - the width of the cropper\n* height (string) - the height of the cropper\n* padding (integer) - space, in pixels, rounding the shape\n* max-size (integer) - max size of the image, in pixels\n* shape (string) - the cropping guideline shape (circle/square)\n* step (bound integer) - the variable which dictates which step the user will see (used for resetting purposes)\n* src (bound Blob or base64 string) - scope variable that will be the source image for the crop\n* result (bound string) - the variable which will have the resulting data uri bound to it\n* result-blob (bound Blob) - the variable which will have the resulting data as a Blob object\n* crop (bound boolean) - scope variable that must be set to true when the image is ready to be cropped\n\n### Example markup\n```html\n\u003cimage-crop\t\t\t \n data-height=\"200\"\n data-width=\"150\"\n data-shape=\"square\"\n data-step=\"imageCropStep\"\n src=\"imgSrc\"\n data-result=\"result\"\n data-result-blob=\"resultBlob\"\n crop=\"initCrop\"\n padding=\"250\"\n max-size=\"1024\"\n\u003e\u003c/image-crop\u003e\t\n```\n\n# See a standalone working example\n[Working example on JSBin](http://jsbin.com/fovovu/1/edit?javascript,output)\n\n## Step 1. Choose image, drag to move and drag corner handle to zoom\n\n![Choose image](https://s3-eu-west-1.amazonaws.com/andyshora/crop-step-1.png)\n\n## Step 2. Produces a result as a base64-encoded data uri\n\n![Choose image](https://s3-eu-west-1.amazonaws.com/andyshora/crop-step-2.png)\n","funding_links":[],"categories":["Multimedia"],"sub_categories":["Image"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyshora%2Fangular-image-crop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyshora%2Fangular-image-crop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyshora%2Fangular-image-crop/lists"}