cropper是一个图片裁剪工具，是H5后使用canvas技术设计的。所以该插件必须是在支持canvas的浏览器上运行（IE9+），由在移动端浏览器上支持良好。插件本身提供支持图片放大缩小，支持鼠标滚轮操作，支持图片旋转。
文档及下载地址：https://github.com/fengyuanchen/cropper/
Installation
Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/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! */
}
$('#image').cropper({
aspectRatio: 16 / 9,
crop: function(e) {
// Output the result data for cropping image.
console.log(e.x);
console.log(e.y);
console.log(e.width);
console.log(e.height);
console.log(e.rotate);
console.log(e.scaleX);
console.log(e.scaleY);
}
});
转载请注明：三只源码 » 强大的jquery图片剪裁插件(必须支持Canvas的浏览器)
