photoclip / 移动端图片上传剪裁插件 /一款手势驱动的裁图插件

官方网站 https://www.npmjs.com/package/photoclip

介绍

• 在移动设备上双指捏合为缩放，双指转动为旋转
• 在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度

兼容

IE10及以上版本，Chrome、Firefox、Safari、Android、微信等主流先进浏览器

依赖插件

iscroll-zoom.js
hammer.js
lrz.all.bundle.js

使用方法

<div id="clipArea"></div>
<input type="file" id="file" />
...
<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/PhotoClip.js"></script>
<script>
var pc = new PhotoClip('#clipArea');
file.addEventListener('change', function() {
    pc.load(this.files[0]);
});
</script> 

PhotoClip 构造函数

new PhotoClip( container [, options] )

构造函数有两个主要参数：

container

表示图片裁剪容器的选择器或者DOM对象。

options

配置选项，详细配置如下：

• size      截取框大小。默认值为 [100,100]。

  值为数字或者数组。
  当值为数字时，表示截取框为宽高都等于该值的正方形。
  当值为数组时，数组中索引[0]和[1]所对应的值分别表示宽和高。

• adaptive    截取框自适应。默认为 ''。

  类型为：字符串或者数组。

  设置该选项后，size 选项将会失效，此时 size 进用于计算截取框的宽高比例。
  当值为一个百分数字符串时，表示截取框的宽度百分比。
  当值为数组时，数组中索引 [0] 和 [1] 所对应的值分别表示宽和高的百分比（不是宽与高的百分比，是宽相对于剪裁容器宽的百分比，高相对于剪裁容器高的百分比）。<