PhotoClip.js
PhotoClip.js 介绍
一款手势驱动的裁图插件，移动端照片裁剪的简洁化解决方案！
在移动设备上双指捏合为缩放，双指转动为旋转
在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度
兼容
IE10及以上版本，Chrome、Firefox、Safari、Android、微信等主流先进浏览器
依赖插件
iscroll-zoom.js hammer.js lrz.all.bundle.js由于 iscroll 原插件的 zoom 扩展存在几处 bug，所以建议使用 demo 中提供的 iscroll-zoom.js 文件，本人已经将这些 bug 修复，并针对本插件做了优化。使用方法
一般引入
<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>
AMD模块化引入
require.config({
paths: {
'iscroll': 'js/iscroll-zoom-min',
'hammer': 'js/hammer.min',
'lrz': 'js/lrz.all.bundle',
'PhotoClip': 'js/PhotoClip'
},
shim: {
'iscroll': {
exports: 'IScroll'
}
}
});
require(['PhotoClip'],function(PhotoClip) {
var pc = new PhotoClip('#clipArea');
});
通过npm引入
安装
$ npm install photoclip
引入
// ES6
import PhotoClip from 'photoclip'
// CommonJS
var PhotoClip = require('photoclip')
GitHub:https://github.com/baijunjie/PhotoClip.js
网站描述:一款手势驱动的裁图插件