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.con fig ({
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'
// Commo njs
var PhotoClip = require('photoclip')
GitHub: https://github.com/baijunjie/PhotoClip.js
网站描述: 一款手势驱动的裁图 插件
PhotoClip.js官方网站
官方网站：
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。