cropper 图片剪辑-01

最近用到了一个图片裁剪工具cropper，现在分享下自己的使用经验：

1、cropper的资源和文档：

GitHub地址：https://github.com/fengyuanchen/cropper

cropper示例地址：https://fengyuanchen.github.io/cropper/

2、cropper使用方法：

cropperjs引入的方法：

1.从GitHub下载zip格式，这样简单方便，更重要的是可以选择下载工具，如果你的网络状况不错，下载速度是很快的。

2.从zip压缩包中，打开dist文件夹，解压出cropper.min.css和cropper.min.js，这两个文件就可以了。

3.cropper.js是依赖jQuery的，所以想要在页面中使用它，需要确保先引入jQuery，然后再引入第2步中的两个文件：一个是压缩版的css样式表，另一个是压缩版的js脚本文件。

<script src="/path/jquery.js"></script><!-- jQuery is required -->

<link  href="/path/cropper.css" rel="stylesheet">

<script src="/path/cropper.js"></script>

cropperjs使用方法

1.在html结构中撰写一个被div元素包裹的img标签，

<div>
  <img id="image" src="picture.jpg">
</div>

注意：一定要给img标签设置max-width：100%；的css属性，

2.接下来就要进入丰富多彩的js世界了，

创建一个cropper实例：

var cropper = new Cropper(image, options);

两个参数对象：image，options。image可以是DOM对象，也可以是一个jQuery对象如$("#image")。重点和难点是options对象。可以把options设计为json对象，这是最直接、最明了的方式了。