(源码)基于 JavaScript 的移动端照片裁剪插件.zip

# 基于 JavaScript 的移动端照片裁剪插件 ## 项目简介 PhotoClip.js v3 是一款手势驱动的裁图插件，为移动端照片裁剪提供简洁化解决方案。支持在移动设备上通过双指捏合缩放、双指转动旋转图片，在 PC 设备上使用鼠标滚轮缩放、双击顺时针旋转 90 度。兼容 IE10 及以上版本、Chrome、Firefox、Safari、Android、微信等主流先进浏览器。 ## 项目的主要特性和功能 1. **多设备操作支持**：移动设备支持双指捏合缩放与双指转动旋转，PC 设备支持鼠标滚轮缩放与双击旋转。 2. **广泛兼容**：兼容多种主流先进浏览器和设备。 3. **依赖优秀插件**：依赖 iscroll-zoom.js、hammer.js 和 lrz.all.bundle.js 等插件，提升用户体验和性能。 4. **多样化引入方式**：支持一般引入、AMD 模块化引入和通过 npm 引入。 5. **可自定义配置**：PhotoClip 构造函数提供多种配置选项，如截取框大小、输出图像大小、输出类型等，可按需自定义。 6. **丰富回调函数**：提供图片开始加载、加载完成、加载失败、裁剪完成、裁剪失败等多种回调函数，方便后续操作和错误处理。 ## 安装使用步骤 ### 前提 假设你已经下载了本项目的源码文件。 ### 步骤 1. **引入依赖插件**： - 一般引入方式需在 HTML 文件中依次引入 `iscroll-zoom.js`、`hammer.min.js`、`lrz.all.bundle.js` 和 `PhotoClip.js`。 - AMD 模块化引入需配置 `require.config` 并引入相关模块。 - 通过 npm 引入需先执行 `npm install photoclip`，再使用 `import` 或 `require` 引入。 2. **创建 PhotoClip 实例并配置选项**：使用 `new PhotoClip(container, options)` 创建实例，根据需求配置 `options` 中的各项参数。 3. **监听相关事件并操作**：可监听如 `loadStart`、`loadComplete`、`done` 等回调函数，执行后续操作。例如，监听文件选择事件，调用 `pc.load` 加载图片。 ### 常见代码示例 #### 一般引入 ```html <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 模块化引入 ```js 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 引入 ```js // ES6 import PhotoClip from 'photoclip' // CommonJS var PhotoClip = require('photoclip') ```