PHPackages zara-4/crop-select-js - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. zara-4/crop-select-js ActiveProject[Image & Media](/categories/media) zara-4/crop-select-js ===================== A simple image cropping selection jQuery plugin. 1.0.1(8y ago)15174[7 issues](https://github.com/zara-4/crop-select-js/issues)[1 PRs](https://github.com/zara-4/crop-select-js/pulls)GNU GPL 3.0JavaScript Since Jul 25Pushed 2y ago1 watchersCompare [ Source](https://github.com/zara-4/crop-select-js)[ Packagist](https://packagist.org/packages/zara-4/crop-select-js)[ RSS](/packages/zara-4-crop-select-js/feed)WikiDiscussions master Synced 3d ago READMEChangelog (2)DependenciesVersions (3)Used By (0) CropSelectJs ============ [](#cropselectjs) A simple image cropping selection jQuery plugin. [View working example >](https://zara4.com/projects/crop-select-js) [![Example](doc/crop.gif)](doc/crop.gif) By [Zara 4 image compression](https://zara4.com) service Installation ============ [](#installation) - Bower: `bower install crop-select-js --save` - NPM: `npm install crop-select-js` - Zip: [Download](https://github.com/zara-4/crop-select-js/archive/master.zip) You will need to include both `crop-select-js.min.js` and `crop-select-js.min.css` into your web page. - [Packagist Page](https://packagist.org/packages/zara-4/crop-select-js) - [NPM Page](https://www.npmjs.com/package/crop-select-js) Basic Example ============= [](#basic-example) Html code ``` ``` Javascript code ``` $('#crop-select').CropSelectJs({ imageSrc: 'path/to/image.jpg' }); ``` Functions ========= [](#functions) To call a function on a CropSelectJs element, follow the pattern below. Replace the text 'function' with the name of the function you wish to call. ``` $('#crop-select').CropSelectJs('function') ``` The functions available are listed below: FunctionDescriptionenableAnimatedBorderMake the selection border animateddisableAnimatedBorderMake the selection border static (not animated)getSelectionBoxXGet the X coordinate of the selection boxsetSelectionBoxXSet the X coordinate of the selection boxgetSelectionBoxYGet the Y coordinate of the selection boxsetSelectionBoxYSet the Y coordinate of the selection boxgetSelectionBoxWidthGet the width of the selection boxsetSelectionBoxWidthSet the width of the selection boxgetSelectionBoxHeightGet the height of the selection boxsetSelectionBoxHeightSet the height of the selection boxsetSelectionAspectRatioSet the aspect ratio of the selection boxclearSelectionAspectRatioClear the aspect ratio of the selection box (allows free resizing)getImageSrcGet the src to the current image being displayedgetImageWidthGet the width of the current image being displayedgetImageHeightGet the height of the current image being displaygetImageAspectRatioGet the aspect ratio of the current image being displayedsetImageSrcSet the src of the image to be displayedselectEverythingSelect the entire imageselectCentredSquareSelect a square centred in the middle of the imageselectCentredFittedAspectRatioSelect an area matching the aspect ratio centred in the middle of the image--- Events ====== [](#events) EventTrigger NameDescriptionselectionResizecrop-select-js.selection.resizeTriggered when the crop selection is resizedselectionMovecrop-select-js.selection.moveTriggered when the crop selection is moves--- Event 'selectionResize' ----------------------- [](#event-selectionresize) This event is triggered when the crop selection is resized. You can attach a callback by either providing a callback function when initialising, or by attaching an event listener. To attach the event listener when initialising, do: ``` $('#element').CropSelectJs({ // Set the image imageSrc: 'path/to/image.jpg', // Set the selection resize event handler selectionResize: function(payload) { // Do something... } }); ``` Alternatively you can attach an event listener (which can be after initialisation) by: ``` $('#element').on('crop-select-js.selection.resize', function(payload) { // Do something... }); ``` ### Payload Object [](#payload-object) The payload that is given on this event will have the structure: ``` { width, // The width of the selection on screen height, // The height of the selection on screen widthScaledToImage, // The width of the selection scaled to the image heightScaledToImage // The height of the selection scaled to the image } ``` --- Event 'selectionMove' --------------------- [](#event-selectionmove) This event is triggered when the crop selection is moved. You can attach a callback by either providing a callback function when initialising, or by attaching an event listener. To attach the event listener when initialising, do: ``` $('#element').CropSelectJs({ // Set the image imageSrc: 'path/to/image.jpg', // Set the selection move event handler selectionMove: function(payload) { // Do something... } }); ``` Alternatively you can attach an event listener (which can be after initialisation) by: ``` $('#element').on('crop-select-js.selection.move', function(payload) { // Do something... }); ``` ### Payload Object [](#payload-object-1) The payload that is given on this event will have the structure: ``` { x, // The x coordinate of the selection on screen y, // The y coordinate of the selection on screen xScaledToImage, // The x coordinate of the selection scaled to the image yScaledToImage // The y coordinate of the selection scaled to the image } ``` --- License ======= [](#license) CropSelectJs is released under the GNU GPL 3.0 license. [View license](LICENSE.md) ### Health Score 28 — LowBetter than 54% of packages Maintenance11 Infrequent updates — may be unmaintained Popularity16 Limited adoption so far Community9 Small or concentrated contributor base Maturity64 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 3215d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/2f0d77a0a32bfc7cdd96d2937da5c554f892e7f3f0f1b863c04526c386086ff1?d=identicon)[CBS Industries](/maintainers/CBS%20Industries) --- Top Contributors [![colin-stannard](https://avatars.githubusercontent.com/u/3418449?v=4)](https://github.com/colin-stannard "colin-stannard (10 commits)") --- Tags imagejquerycropping ### Embed Badge ![Health badge](/badges/zara-4-crop-select-js/health.svg) ``` [![Health](https://phpackages.com/badges/zara-4-crop-select-js/health.svg)](https://phpackages.com/packages/zara-4-crop-select-js) ``` ### Alternatives [intervention/image PHP Image Processing 14.3k194.3M2.2k](/packages/intervention-image)[league/glide Wonderfully easy on-demand image manipulation library with an HTTP based API. 2.6k51.2M116](/packages/league-glide)[liip/imagine-bundle This bundle provides an image manipulation abstraction toolkit for Symfony-based projects. 1.7k38.3M217](/packages/liip-imagine-bundle)[spatie/image Manipulate images with an expressive API 1.4k54.4M138](/packages/spatie-image)[jonom/focuspoint Smarter automatic image cropping for Silverstripe 108645.6k49](/packages/jonom-focuspoint)[intervention/image-laravel Laravel Integration of Intervention Image 1496.5M102](/packages/intervention-image-laravel) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)