当前位置：维易PHP培训学院 > javascript教程 > 内容正文

jquery photoClip支持手机端裁剪的本地裁剪图片后上传插件

作者：维易PHP培训学院时间 2017-05-01

《jquery photoClip支持手机端裁剪的本地裁剪图片后上传插件》要点：
本文介绍了jquery photoClip支持手机端裁剪的本地裁剪图片后上传插件，希望对您有用。如果有疑问，可以联系我们。

图片上传前裁剪，现有好几款插件，不过支持手机，PC最好的是jquery photoClip插件。

这个插件外面流传至少2个版本，其中一个是不支持调整宽高，固定正方形。这款从这里下载：

https://github.com/baijunjie/PhotoClip.js

这里推荐这款：https://github.com/topoadmin/photoClip 可以调整宽高，

注意，示例中用到了amazeui.min.js插件，这个是非必须的，它是一个框架JS，在使用时不要只会抄。增加了页面大小。

下面是API摘要，具体见：https://github.com/topoadmin/photoClip/blob/master/docs/api.md

选项	类型	默认值	描述
width	Int	`200`	裁剪框宽
height	Int	`200`	裁剪框高
fileMinSize	Int	`20`	图片质量最小值(kb)
defaultImg	String	`'图片路径'`	初始图片路径（未完善）
file	dom	`null`	(必须) file按钮
ok	dom	`null`	(必须) 确定裁剪按钮
outputType	String	`'jpg'`	指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
strictSize	Boolean	`false`	是否严格按照截取区域宽高裁剪。默认为false，表示截取区域宽高仅用于约束宽高比例。如果设置为true，则表示截取出的图像宽高严格按照截取区域宽高输出。
customOutput	Boolean	`false`	自定义选择完毕输出，不执行内部填充函数
loadStart	Function	`null`	开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入。
loadProgress	Function	`null`	加载中的回调,传入参数加载百分比
loadComplete	Function	`null`	加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入。
loadError	Function	`null`	加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入。
clipFinish	Function	`null`	裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入。
formatError	Function	`null`	图片格式错误
imgSizeMin	Function	`null`	图片质量小于设置范围时回调

可以回调函数clipFinish用于接收裁剪完后，用$.post上传到服务器保存。