【源码】基于 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

...

```

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')

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】