PHPackages monstrum/cropbox - 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. monstrum/cropbox ActiveLibrary[Image & Media](/categories/media) monstrum/cropbox ================ Image Editor in standard jQuery plugin Structure. Fork from https://github.com/acornejo/jquery-cropbox v0.2.0(10y ago)058MITJavaScript Since Jul 26Pushed 10y ago1 watchersCompare [ Source](https://github.com/monstrum/jquery-cropbox)[ Packagist](https://packagist.org/packages/monstrum/cropbox)[ Docs](https://github.com/monstrum/jquery-cropbox)[ RSS](/packages/monstrum-cropbox/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)DependenciesVersions (2)Used By (0) jquery-cropbox plugin. ====================== [](#jquery-cropbox-plugin) jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag). This plugin depends only on jQuery. If either `Hammer.js` or `jquery.hammer.js` is loaded, the cropbox plugin will support gestures for panning and zooming the cropbox. Similary, if the `jquery.mousewheel.js` plugin is loaded, then the cropbox plugin will support zoom in & out using the mousewheel. All dependencies on third party libraries (other than jQuery) are strictly optional. Support for CommonJS and AMD loading is built in. In browsers that support the HTML5 FIle API and Canvas API, the cropbox plugin provides mehtods to crop the image on the client and obtain the resulting cropped image as a Data URL or a binary blob to upload it to the server. Check out the plugin in action here **History:**This plugin started as a fork of [jQcrop](https://github.com/terebentina/jQcrop), and added touch support, mousewheel support and client resize support through the canvas api. **Install with Bower:** `bower install cropbox` Usage ----- [](#usage) ``` $('yourimage').cropbox({ width: 200, height: 200 }, function() { //on load console.log('Url: ' + this.getDataURL()); }).on('cropbox', function(e, data) { console.log('crop window: ' + data); }); ``` Options ------- [](#options) Option Type Default Required Description width integer 200 no Width in pixels of the cropping window height integer 200 no Height in pixels of the cropping window zoom integer 10 no Number of incremental zoom steps. With the default of 10, you have to click the zoom-in button 9 times to reach 100%. maxZoom number 1.0 no Maximum zoom value. With the default of 1.0 users can't zoom beyond the maximum image resolution. controls string/jquery null no If not null, this is the entire html block that should appear on hover over the image for instructions and/or buttons (could include the zoom in/out buttons for example). If null, the default html block is used which has the text "Click to drag" and the zoom in/out buttons. Use false to disable controls. result {cropX:number, cropY:number, cropW:number, cropH:number} null no Set the initial cropping area showControls never, always, hover, auto auto no This flag is used to determine when to display the controls. Never, always and hover do exactly what you would expect (never show them, always show them, show them on hover). The auto flag is the same as the hover flag, except that on mobile devices it always shows the controls (since there is no hover event). Methods ------- [](#methods) Name Parameters Description zoomIn (none) Increase image zoom level by one step zoomOut (none) Decrease image zoom level by one step zoom percent Set zoom leevl to a value between 0 and 1. Need to call update to reflect the changes. drag {startX: integer, startY: integer, dx: integer, dy: integer} Simulate image dragging, starting from (startX,startY) and moving a delta of (dx,dy). Need to call update to reflect the changes. setCrop {cropX: number, cropY: number, cropW: number, cropH: number} Set crop window. update (none) Update the cropped result (must call after zoom and drag). getDataURL (none) Generate a URL for the cropped image on the client (requires HTML5 compliant browser). getBlob (none) Generate a Blob with the cropped image (requires HTML5 compliant browser). remove (none) Remove the cropbox functionality from the image. Event ----- [](#event) To get the crop results, bind a function on the `cropbox` event or read the object's result property . ``` $('yourimage').cropbox({width: 250, height: 250}) .on('cropbox', function (e, result) { console.log(result); }); ``` A reference to the cropbox object can be accessed like so: ``` var crop = $('yourimage').data('cropbox'); console.log(crop.result); ``` or inside the onload function: ``` var crop = $('yourimage').cropbox({}, function() { console.log(this.result); }); ``` You then have access to all the properties and methods used for that specific element. Bug Reporting ------------- [](#bug-reporting) Use the [issues](https://github.com/acornejo/jquery-cropbox/issues)section to report any problems or questions regarding jquery-cropbox. Please understand that I develop this plugin in my spare time, which is limited. To make the best use of my time, I ask that you submit a detailed bug report and include a [jsfiddle](http://jsfiddle.net) that exhibits the problem, otherwise I won't be able to offer much help. A sample jsfiddle is provided [here](http://jsfiddle.net/Ak6d5/), fork it and create a minimal example that recreates the problem you are having and provide a link to it in the issue. ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community13 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 90% 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 Unknown Total 1 Last Release 3948d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/39bc4ab046df5ca14cc418072f3bc35fe880fe17c8630ff3640b05caf281d5cb?d=identicon)[monstrum](/maintainers/monstrum) --- Top Contributors [![acornejo](https://avatars.githubusercontent.com/u/83786?v=4)](https://github.com/acornejo "acornejo (54 commits)")[![richard-flosi](https://avatars.githubusercontent.com/u/1141672?v=4)](https://github.com/richard-flosi "richard-flosi (2 commits)")[![KidkArolis](https://avatars.githubusercontent.com/u/324440?v=4)](https://github.com/KidkArolis "KidkArolis (1 commits)")[![monstrum](https://avatars.githubusercontent.com/u/6648831?v=4)](https://github.com/monstrum "monstrum (1 commits)")[![pkyriacou](https://avatars.githubusercontent.com/u/4070784?v=4)](https://github.com/pkyriacou "pkyriacou (1 commits)")[![smartcorestudio](https://avatars.githubusercontent.com/u/2891792?v=4)](https://github.com/smartcorestudio "smartcorestudio (1 commits)") --- Tags thumbnailcropimage drag and cropzoom and crop ### Embed Badge ![Health badge](/badges/monstrum-cropbox/health.svg) ``` [![Health](https://phpackages.com/badges/monstrum-cropbox/health.svg)](https://phpackages.com/packages/monstrum-cropbox) ``` ### Alternatives [intervention/image PHP Image Processing 14.3k194.3M2.2k](/packages/intervention-image)[sybio/image-workshop Powerful PHP class using GD library to work easily with images including layer notion (like Photoshop or GIMP) 860918.1k11](/packages/sybio-image-workshop)[jbzoo/image A PHP class that simplifies working with images 171126.9k3](/packages/jbzoo-image)[intervention/image-laravel Laravel Integration of Intervention Image 1496.5M102](/packages/intervention-image-laravel)[stefangabos/zebra_image A single-file, lightweight PHP library designed for efficient image manipulation featuring methods for modifying images and applying filters 141110.4k6](/packages/stefangabos-zebra-image)[sadovojav/yii2-image-thumbnail Yii2 image thumbnail component 2142.1k](/packages/sadovojav-yii2-image-thumbnail) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)