素材牛VIP会员

图片裁剪添加旋转 缩放按钮功能插件jQuery.photoClip

 所属分类:网页特效-图片裁剪

 浏览:1558次  评论:4次  更新时间:2018-05-30
牛币素材VIP可免积分下载
图片裁剪添加旋转 缩放按钮功能插件jQuery.photoClip兼容IE11
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:项目上用的jquery.photoClip 插件,为了更好的用户体验 需要添加 旋转 缩放按钮功能,所以在原有的基础上添加了点功能,希望能帮助各位,写的不好 海涵!

详细介绍

* @brief支持手势的裁图插件

*在移动设备上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度

*在PC设备上鼠标滚轮为缩放,每次双击则顺时针旋转90度

* @option_param {array} size 截取框的宽和高组成的数组。默认值为[260,260]

* @option_param {array} outputSize 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小

* //@option_param {string} outputType 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"

* @option_param {string} file 上传图片的<input type="file">控件的选择器或者DOM对象

* @option_param {string} view 显示截取后图像的容器的选择器或者DOM对象

* @option_param {string} ok 确认截图按钮的选择器或者DOM对象

* @option_param {string} rotaBtn 旋转图片按钮的选择器或者DOM对象

* @option_param {string} bigBtn 放大图片按钮的选择器或者DOM对象

* @option_param {string} samllBtn 缩小图片按钮的选择器或者DOM对象

* @option_param {function} loadStart 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入

* @option_param {function} loadComplete 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入

* @option_param {function} loadError 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入

* @option_param {function} clipFinish 裁剪完成的回调函数。this指向原图片对象,会将裁剪出的图像数据DataURL作为

文件目录结构

  • ┝ index.html
  • ┝ jquery.min.js
  • js
    • ┝ hammer.js
    • ┝ iscroll-zoom.js
    • ┝ jquery.photoClip.js
    • ┝ jquery.photoClip.min.js
    • ┝ lrz.all.bundle.js

相关素材 - 图片裁剪

讨论这个素材(4)回答他人问题或分享使用心得会奖励牛币

85***59  
2018年06月01日

不错

回复
Do***le  
2018年06月12日

看起来不错

回复
Do***le  
2018年06月12日

感谢分享。

回复
bo***fa  
2018年07月16日

真需要的

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)