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

发布时间:2020-05-14 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jquery photoClip支持手机端裁剪的本地裁剪图片后上传插件脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

相关主题:HTML和JS入门 / JS、Jquery插件

图片上传前裁剪,现有好几款插件,不过支持手机,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


选项类型默认值描述
widthInt200裁剪框宽
height裁剪框高
fileMinSizeInt20图片质量最小值(kb)
defaultImgString'图片路径'初始图片路径(未完善)
filedomnull(必须) file按钮
okdomnull(必须) 确定裁剪按钮
outputTypeString'jpg'指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
strictSizeBooleanfalse是否严格按照截取区域宽高裁剪。默认为false,表示截取区域宽高仅用于约束宽高比例。如果设置为true,则表示截取出的图像宽高严格按照截取区域宽高输出。
customOutputBooleanfalse自定义选择完毕输出,不执行内部填充函数
loadStartFunctionnull开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入。
loadProgressFunctionnull加载中的回调,传入参数 加载百分比
loadCompleteFunctionnull加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入。
loadErrorFunctionnull加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入。
clipFinishFunctionnull裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入。
formatErrorFunctionnull图片格式错误
imgSizeMinFunctionnull图片质量小于设置范围时回调


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

总结

以上是脚本之家为你收集整理的jquery photoClip支持手机端裁剪的本地裁剪图片后上传插件全部内容,希望文章能够帮你解决jquery photoClip支持手机端裁剪的本地裁剪图片后上传插件所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478