扫一扫分享
一款手势驱动的裁图插件,移动端照片裁剪的简洁化解决方案!
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>
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 install photoclip
引入
// ES6 import PhotoClip from 'photoclip' // CommonJS var PhotoClip = require('photoclip')
手机预览