{"id":33091739,"url":"https://github.com/JrSchild/jr-crop","last_synced_at":"2025-11-19T12:01:13.716Z","repository":{"id":58230241,"uuid":"20287217","full_name":"JrSchild/jr-crop","owner":"JrSchild","description":"A simple ionic plugin to crop your images","archived":false,"fork":false,"pushed_at":"2018-03-02T20:27:37.000Z","size":266,"stargazers_count":161,"open_issues_count":19,"forks_count":68,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-10-07T21:44:15.291Z","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/JrSchild.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-05-29T08:22:21.000Z","updated_at":"2024-07-24T09:02:26.000Z","dependencies_parsed_at":"2022-08-31T09:21:29.029Z","dependency_job_id":null,"html_url":"https://github.com/JrSchild/jr-crop","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/JrSchild/jr-crop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JrSchild%2Fjr-crop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JrSchild%2Fjr-crop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JrSchild%2Fjr-crop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JrSchild%2Fjr-crop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JrSchild","download_url":"https://codeload.github.com/JrSchild/jr-crop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JrSchild%2Fjr-crop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285240542,"owners_count":27137943,"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-11-19T02:00:05.673Z","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-11-14T18:00:30.356Z","updated_at":"2025-11-19T12:01:13.704Z","avatar_url":"https://github.com/JrSchild.png","language":"JavaScript","funding_links":[],"categories":["And A Bunch More! (I am in the process of sorting these)"],"sub_categories":[],"readme":"jr-crop\n======\n\nA simple ionic plugin to crop your images, inspired by whatsapp and telegram.\n* Specifiy width and height of target\n* Doesn't actually scale the image, only returns a cropped version. Since the quality of images while scaling is inconsistent it's up to the developper to implement this, preferably on the server.\n* Returns a canvas element with the new cropped image.\n\n![example](/example.jpg)\n\n## Simple enough, let's get started.\n\nInstall the files: `bower install jr-crop --save`.\n\nImport the static files jr-crop.js and jr-crop.css. Declare jrCrop as a dependency.\n```\n.module('myModule', ['ionic', 'jrCrop'])\n```\nInject jr-crop.\n```\n.controller('MyController', function($jrCrop) {\n```\n\nCall the crop function to open a new modal where the user can crop this image. Pass in the image url and targetsize. The function will return a promise that resolves when the user is done or fails when the user cancels.\n```\n$jrCrop.crop({\n    url: url,\n    width: 200,\n    height: 200\n}).then(function(canvas) {\n    // success!\n    var image = canvas.toDataURL();\n}, function() {\n    // User canceled or couldn't load image.\n});\n```\n\n##### Changing the title\nAdditionally you can add a title in the footer.\n```\n$jrCrop.crop({\n    url: url,\n    width: 200,\n    height: 200,\n    title: 'Move and Scale'\n});\n```\n\n##### Circle mask\nAdd circle:true to the options to overlay the image with a circle. Note: it won't actually crop the image with a circle, just the visual representation.\n```\n$jrCrop.crop({\n    url: url,\n    circle: true\n});\n```\n\n##### Changing default options.\nOverwriting default options can be done as well.  \n`$jrCrop.defaultOptions.template = '\u003cdiv\u003e...\u003c/div\u003e';`  \n`$jrCrop.defaultOptions.width = 300;`  \n`$jrCrop.defaultOptions.circle = true;`\n\n#### Templates\n\n##### Custom templates\nThe template can be overwritten by passing your custom HTML in the options.\n```\n$jrCrop.crop({\n    url: url,\n    width: 200,\n    height: 200,\n    template: '\u003cdiv\u003e...\u003c/div\u003e'\n});\n```\n\n##### Interpolation Markup\nIf you configured the expressions of interpolated strings, you can apply this to the template by replacing the markup with your custom markup.\n```\n$jrCrop.defaultOptions.template = $jrCrop.defaultOptions.template\n    .replace(/{{/g, '\u003c%')\n    .replace(/}}/g, '%\u003e');\n```\n\n## Examples please!!\nI got ya. Run `bower install \u0026\u0026 npm install \u0026\u0026 npm test` and visit `localhost:8181`. Great, now you can visit this from your phone too. It works best when packaged in cordova, as how you should use ionic anyway.\n\n## Support\nThough I'm only supporting iOS, I did get reports that it's working well on Android. If it doesn't, feel free to fork and update my codebase. If you just want to leave your thoughts you can reply in the [ionic forum topic](http://forum.ionicframework.com/t/sharing-my-photo-crop-plugin/4961).\n\n## Contributing\nOpen an issue or create a pull request. Please exclude the /dist files from your pull request.\n\n## Release History\n* 2015-11-13   v1.1.2   Overwrite the template through options. Documentation on defaultOptions.\n* 2015-11-12   v1.1.1   Circle mask should not be shown by default.\n* 2015-11-12   v1.1.0   Add `circle` option to overlay the image with a circle mask.\n* 2015-04-05   v1.0.0   Breaking: jr-crop is now its own module, import it first. Support ionic v1.0.0 release candidate. Setting options will no longer overwrite the default options.\n* 2015-01-04   v0.1.1   Customize Cancel and Choose text.\n* 2014-12-14   v0.1.0   Release on bower, move from grunt to gulp, version numbering in header. Clean up examples and test server. Place the image in the center on initializing. Add maximum scale option. Hide picture overflow in modal at bigger viewport. Add example pictures as static files rather than from url.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJrSchild%2Fjr-crop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJrSchild%2Fjr-crop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJrSchild%2Fjr-crop/lists"}