请记住我们的网址:3zcode.com。也就是“三只源码"

强大的jquery图片剪裁插件(必须支持Canvas的浏览器)

源码 admin 1039℃ 0评论

强大的jquery图片剪裁插件(必须支持Canvas的浏览器)

 

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的浏览器)

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址