fengyuanchen / Jquery Cropper
Licence: mit
A jQuery plugin wrapper for Cropper.js.
Stars: ✭ 516
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Jquery Cropper
Cropper
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
Stars: ✭ 7,825 (+1416.47%)
Mutual labels: image-processing, cropper, image-cropper, jquery-plugin, jquery
Simple Crop
全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端的全平台图片裁剪组件。
Stars: ✭ 294 (-43.02%)
Mutual labels: image-processing, cropper, image-cropper
Cropperjs
JavaScript image cropper.
Stars: ✭ 10,120 (+1861.24%)
Mutual labels: image-processing, cropper, image-cropper
Jquery Fullscreen Plugin
This jQuery plugin provides a simple to use mechanism to control the new fullscreen mode of modern browsers
Stars: ✭ 327 (-36.63%)
Mutual labels: jquery-plugin, jquery
Waitme
jquery plugin for easy creating loading css3/images animations
Stars: ✭ 302 (-41.47%)
Mutual labels: jquery-plugin, jquery
Sticky Kit
A jQuery plugin for creating smart sticky elements
Stars: ✭ 2,961 (+473.84%)
Mutual labels: jquery-plugin, jquery
Material Cards
Card style based on Google Material color palette
Stars: ✭ 370 (-28.29%)
Mutual labels: jquery-plugin, jquery
Datetimepicker
jQuery Plugin Date and Time Picker
Stars: ✭ 3,402 (+559.3%)
Mutual labels: jquery-plugin, jquery
Hc Sticky
JavaScript library that makes any element on your page visible while you scroll.
Stars: ✭ 375 (-27.33%)
Mutual labels: jquery-plugin, jquery
Cc
一个基于angular5.0.0+ng-bootstrap1.0.0-beta.8+bootstrap4.0.0-beta.2+scss的后台管理系统界面(没基础的同学请先自学基础,谢谢!)
Stars: ✭ 416 (-19.38%)
Mutual labels: cropper, jquery
Bigslide.js
⚠️**DEPRECATED**⚠️ A tiny slide panel navigation jQuery plugin with big dreams
Stars: ✭ 415 (-19.57%)
Mutual labels: jquery-plugin, jquery
Texttailor.js
jQuery plugin, tailor made text to fill the height of the parent element or ellipse it if it doesn't fit
Stars: ✭ 291 (-43.6%)
Mutual labels: jquery-plugin, jquery
Jquery Loading
Easily add and manipulate loading states of any element on the page.
Stars: ✭ 321 (-37.79%)
Mutual labels: jquery-plugin, jquery
Stickystack.js
A jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport.
Stars: ✭ 287 (-44.38%)
Mutual labels: jquery-plugin, jquery
Protip
A new generation jQuery Tooltip plugin
Stars: ✭ 357 (-30.81%)
Mutual labels: jquery-plugin, jquery
Peity
Progressive <svg> pie, donut, bar and line charts
Stars: ✭ 4,214 (+716.67%)
Mutual labels: jquery-plugin, jquery
Preloadme
PreLoadMe, a lightweight jQuery website preloader.
Stars: ✭ 272 (-47.29%)
Mutual labels: jquery-plugin, jquery
Sidr
Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
Stars: ✭ 2,924 (+466.67%)
Mutual labels: jquery-plugin, jquery
jquery-cropper
A jQuery plugin wrapper for Cropper.js.
Main
dist/
├── jquery-cropper.js (UMD)
├── jquery-cropper.min.js (UMD, compressed)
├── jquery-cropper.common.js (CommonJS, default)
└── jquery-cropper.esm.js (ES Module)
Getting started
Installation
npm install jquery-cropper jquery cropperjs
Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/cropper.js"></script><!-- Cropper.js is required -->
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/jquery-cropper.js"></script>
Usage
Initialize with $.fn.cropper
method.
<!-- Wrap the image or canvas element with a block element (container) -->
<div>
<img id="image" src="picture.jpg">
</div>
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
var $image = $('#image');
$image.cropper({
aspectRatio: 16 / 9,
crop: function(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
}
});
// Get the Cropper.js instance after initialized
var cropper = $image.data('cropper');
Options
See the available options of Cropper.js.
$().cropper(options);
Methods
See the available methods of Cropper.js.
$().cropper('method', argument1, , argument2, ..., argumentN);
Events
See the available events of Cropper.js.
$().on('event', handler);
No conflict
If you have to use other plugin with the same namespace, just call the $.fn.cropper.noConflict
method to revert to it.
<script src="other-plugin.js"></script>
<script src="jquery-cropper.js"></script>
<script>
$.fn.cropper.noConflict();
// Code that uses other plugin's "$().cropper" can follow here.
</script>
Browser support
It is the same as the browser support of Cropper.js. As a jQuery plugin, you also need to see the jQuery Browser Support.
Contributing
Please read through our contributing guidelines.
Versioning
Maintained under the Semantic Versioning guidelines.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].