PHPackages fengyuanchen/cropper - 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. fengyuanchen/cropper ActiveComponent[Image & Media](/categories/media) fengyuanchen/cropper ==================== A simple jQuery image cropping plugin 272.0k↓17.3%3JavaScript Since Dec 15Pushed 11y ago1 watchersCompare [ Source](https://github.com/Scalar4eg/cropper)[ Packagist](https://packagist.org/packages/fengyuanchen/cropper)[ RSS](/packages/fengyuanchen-cropper/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (3) [Image Cropper](https://github.com/fengyuanchen/cropper) ======================================================== [](#image-cropper) A simple jQuery image cropping plugin. - [Documentation](http://fengyuanchen.github.io/cropper) - [Demo](http://fengyuanchen.github.io/cropper#overview) Features ======== [](#features) - Supports touch - Supports zoom - Supports rotation - Supports canvas - Supports [options](#options) - Supports [methods](#methods) - Supports [events](#events) - Cross-browser support Main ==== [](#main) ``` dist/ ├── cropper.css ( 5 KB) ├── cropper.min.css ( 4 KB) ├── cropper.js (41 KB) └── cropper.min.js (17 KB) ``` Getting started =============== [](#getting-started) Quick start ----------- [](#quick-start) Four quick start options are available: - [Download the latest release](https://github.com/fengyuanchen/cropper/archive/master.zip). - Clone the repository: `git clone https://github.com/fengyuanchen/cropper.git`. - Install with [NPM](http://npmjs.org): `npm install cropper`. - Install with [Bower](http://bower.io): `bower install cropper`. Installation ------------ [](#installation) Include files: ``` ``` Usage ----- [](#usage) Initialize with `$.fn.cropper` method. ``` ``` ``` $(".container > img").cropper({ aspectRatio: 16 / 9, done: function(data) { // Output the result data for cropping image. } }); ``` **Notes:** - The size of the cropper inherits from the size of the image's parent element, so be sure to wrap the image with a visible block element. - The values of the result data was computed with the original size of the image, so you can use them to crop the image directly. Options ------- [](#options) You may set cropper options with `$().cropper(options)`. If you want to change the global default options, You may use `$.fn.cropper.setDefaults(options)`. #### aspectRatio [](#aspectratio) - type: `String` | `Number` - default: `"auto"` The aspect ratio of the cropping zone. By default, the cropping zone is free ratio. #### data [](#data) - type: `Object` - options: "x", "y", "width", "height" - default: `{}` By default, the cropping zone will appear in the center of the image. If you already have values of the last crop and you want to apply them, just set them as option. For example: ``` { x: 100, y: 50, width: 480, height: 270 } ``` #### done [](#done) - type: `Function` - default: `function(data) {}` This function will be executed when the cropping zone changes by a move, resize or crop. #### preview [](#preview) - type: selector - default: `""` A jquery selector, add extra elements for a preview. #### multiple [](#multiple) - type: `Boolean` - default: `false` By default, the plugin only supports one cropper per page. If you intend to use more than one, just initialize them with this option set to `true`. #### modal [](#modal) - type: `Boolean` - default: `true` Show (true) or hide (false) the black modal layer above the cropper. #### dashed [](#dashed) - type: `Boolean` - default: `true` Show (true) or hide (false) the dashed lines above the cropping zone. #### autoCrop [](#autocrop) - type: `Boolean` - default: `true` Render the cropping zone automatically when initialize. #### autoCropArea [](#autocroparea) - type: `Number` - default: `0.8` A number between 0 and 1. Define the automatic cropping area size (percentage). #### dragCrop [](#dragcrop) - type: `Boolean` - default: `true` Enable to remove the current cropping zone and create a new one by dragging over the image. #### movable [](#movable) - type: `Boolean` - default: `true` Enable to move the cropping zone. #### resizable [](#resizable) - type: `Boolean` - default: `true` Enable to resize the cropping zone. #### zoomable [](#zoomable) - type: `Boolean` - default: `true` Enable to zoom the image. #### rotatable [](#rotatable) - type: `Boolean` - default: `true` Enable to rotate the image. #### checkImageOrigin [](#checkimageorigin) - type: `Boolean` - default: `true` By default, the plugin will check the image origin, and if it is a cross-origin image, a "crossOrigin" attribute will be added to the image element to enable "rotate" and "getDataURL". #### minWidth [](#minwidth) - type: `Number` - default: `0` The minimum width (px of original image) of the cropping zone. Use this option only when you are sure that the image has this minimum width. #### minHeight [](#minheight) - type: `Number` - default: `0` The minimum height (px of original image) of the cropping zone. Use this option only when you are sure that the image has this minimum height. #### maxWidth [](#maxwidth) - type: `Number` - default: `Infinity` The maximum width (px of original image) of the cropping zone. Use this option only when you are sure that the image has this maximum width. #### maxHeight [](#maxheight) - type: `Number` - default: `Infinity` The maximum height (px of original image) of the cropping zone. Use this option only when you are sure that the image has this maximum height. #### build [](#build) - type: `Function` - default: `null` An event handler of the "build.cropper" event. #### built [](#built) - type: `Function` - default: `null` An event handler of the "built.cropper" event. #### dragstart [](#dragstart) - type: `Function` - default: `null` An event handler of the "dragstart.cropper" event. #### dragmove [](#dragmove) - type: `Function` - default: `null` An event handler of the "dragmove.cropper" event. #### dragend [](#dragend) - type: `Function` - default: `null` An event handler of the "dragend.cropper" event. Methods ------- [](#methods) #### zoom [](#zoom) - Zoom the image. - Param: a number (positive number for zoom in, negative number for zoom out). - Usage: `$().cropper("zoom", 0.1)` or `$().cropper("zoom", -0.1)`. #### rotate [](#rotate) - Rotate the image (Replace the original image with a new rotated image which was generated by canvas). - Param: a number (positive number for rotate right, negative number for rotate left). - Usage: `$().cropper("rotate", 90)` or `$().cropper("rotate", -90)`. - **Note**: Be sure the browser supports canvas before call this method. - **Note**: Don't call this in IE9/10 (not support `crossOrigin` attribute) when it's a cross-origin image. #### enable [](#enable) - Enable (unfreeze) the cropper. - Usage: `$().cropper("enable")`. #### disable [](#disable) - Disable (freeze) the cropper. - Usage: `$().cropper("disable")`. #### reset [](#reset) - Reset the cropping zone to the start state. - Add a `true` param to reset the cropping zone to the default state. - Usage: `$().cropper("reset")` or `$().cropper("reset", true)`. #### clear [](#clear) - Clear the cropping zone. - Usage: `$().cropper("clear")`. #### replace [](#replace) - Replace the image. - Param: a url. - Usage: `$().cropper("replace", "example.jpg")`. #### destroy [](#destroy) - Destroy the cropper and remove the instance from the image. - Usage: `$().cropper("destroy")`. #### getData(\[rounded\]) [](#getdatarounded) - Get the cropped zone data. - `rounded`(optional): - Type: `Boolean` - Default: `false` - Rounds the output data with `Math.round`. - Usage: `$().cropper("getData")` or `$().cropper("getData", true)`. #### setData [](#setdata) - Reset the cropped zone with new data. - Param: an object containing: "x", "y", "width", "height". - Use with `$().cropper("setData", {width: 480, height: 270})`. **Tip:** If you want to remove the current data, just pass an empty object or `null`. For example: `$().cropper("setData", {})` or `$().cropper("setData", null)`. #### setAspectRatio [](#setaspectratio) - Enable to reset the aspect ratio after built. - Param: "auto" or a positive number ("auto" for free ratio). - Usage: `$().cropper("setAspectRatio", 1.618)`. #### getImageData [](#getimagedata) - Get an object containing image data, contains: "naturalWidth", "naturalHeight", "width", "height", "aspectRatio", "ratio" and "rotate". - The "aspectRatio" is the value of "naturalWidth / naturalHeight". - The "ratio" is the value of "width / naturalWidth". - The "rotate" is the rotated degree of the current image. - Usage: `$().cropper("getImageData")`. #### setDragMode [](#setdragmode) - Change the drag mode. - Params: "crop", "move" and "none". - Usage: `$().cropper("setDragMode", "crop")`. **Tip**: You can toggle the "crop" and "move" mode by double click on the image. #### getDataURL(\[options\[, type\[, quality\]\]\]) [](#getdataurloptions-type-quality) - Get the data url (base64 image) of the cropped zone. - Parameters: - options: A `Object` contains: "width", "height". Define the sizes of the result image. - type: A `String` indicating the image format. The default type is image/png. Other types: "image/jpeg", "image/webp". - quality: A `Number` between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. - **Note:** Be sure the browser supports canvas before call this method. - **Note:** Don't call this in IE9/10 (not support [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)) when it's a [cross-origin image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img). - Usage: ``` $().cropper("getDataURL") $().cropper("getDataURL", { width: 100, height: 100 }) $().cropper("getDataURL", "image/jpeg") $().cropper("getDataURL", "image/jpeg", 0.8) $().cropper("getDataURL", { width: 100, height: 100 }, "image/jpeg", 0.8) ``` Events ------ [](#events) #### build.cropper [](#buildcropper) This event will be fired when the Cropper starts to build. #### built.cropper [](#builtcropper) This event will be fired when the Cropper has been built. #### dragstart.cropper [](#dragstartcropper) This event will be fired before the cropping zone start to move. Related events: "mousedown", "touchstart". #### dragmove.cropper [](#dragmovecropper) This event will be fired when the cropping zone was moving. Related events: "mousemove", "touchmove". #### dragend.cropper [](#dragendcropper) This event will be fired after the cropping zone stop to move. Related events: "mouseup", "mouseleave", "touchend", "touchleave", "touchcancel". No conflict ----------- [](#no-conflict) If you have to use other plugin with the same namespace, just call the `$.fn.cropper.noConflict` method to revert to it. ``` $.fn.cropper.noConflict(); // Code that uses other plugin's "$().cropper" can follow here. ``` Browser Support --------------- [](#browser-support) - Chrome 36+ - Firefox 31+ - Internet Explorer 8+ - Opera 21+ - Safari 5.1+ As a jQuery plugin, you can reference to the [jQuery Browser Support](http://jquery.com/browser-support/). [License](https://github.com/fengyuanchen/cropper/blob/master/LICENSE.md) ------------------------------------------------------------------------- [](#license) Released under the [MIT](http://opensource.org/licenses/mit-license.html) license. Related projects ---------------- [](#related-projects) - ngCropper: ### Health Score 30 — LowBetter than 64% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity34 Limited adoption so far Community18 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/d9022219c80dcee36cf99ec42cfb48698f9bf982188f84b349a324b3b68a6504?d=identicon)[Scalar4eg](/maintainers/Scalar4eg) --- Top Contributors [![pointful-mikkel](https://avatars.githubusercontent.com/u/143463920?v=4)](https://github.com/pointful-mikkel "pointful-mikkel (3 commits)")[![Scalar4eg](https://avatars.githubusercontent.com/u/576244?v=4)](https://github.com/Scalar4eg "Scalar4eg (3 commits)")[![LeEnno](https://avatars.githubusercontent.com/u/2038814?v=4)](https://github.com/LeEnno "LeEnno (2 commits)")[![serg6854](https://avatars.githubusercontent.com/u/5671838?v=4)](https://github.com/serg6854 "serg6854 (1 commits)")[![nchase](https://avatars.githubusercontent.com/u/197309?v=4)](https://github.com/nchase "nchase (1 commits)")[![ext](https://avatars.githubusercontent.com/u/41535?v=4)](https://github.com/ext "ext (1 commits)")[![dejanstojanovic](https://avatars.githubusercontent.com/u/7481783?v=4)](https://github.com/dejanstojanovic "dejanstojanovic (1 commits)") ### Embed Badge ![Health badge](/badges/fengyuanchen-cropper/health.svg) ``` [![Health](https://phpackages.com/badges/fengyuanchen-cropper/health.svg)](https://phpackages.com/packages/fengyuanchen-cropper) ``` ### Alternatives [milon/barcode Barcode generator like Qr Code, PDF417, C39, C39+, C39E, C39E+, C93, S25, S25+, I25, I25+, C128, C128A, C128B, C128C, 2-Digits UPC-Based Extention, 5-Digits UPC-Based Extention, EAN 8, EAN 13, UPC-A, UPC-E, MSI (Variation of Plessey code) 1.5k13.3M39](/packages/milon-barcode)[bkwld/croppa Image thumbnail creation through specially formatted URLs for Laravel 510496.0k23](/packages/bkwld-croppa)[goat1000/svggraph Generates SVG graphs 132849.6k3](/packages/goat1000-svggraph)[cohensive/embed Media Embed (for Laravel or as a standalone). 120370.4k](/packages/cohensive-embed)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 63991.3k4](/packages/netresearch-rte-ckeditor-image)[humanmade/tachyon-plugin Rewrites WordPress image URLs to use Tachyon 87338.5k2](/packages/humanmade-tachyon-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)