photoclip php,基于PhotoClip移动端上传图片裁剪

838ac631aa611c19dd6bae23fe507c58.png

ff20617b0252a94a2598425ec9f64fdc.png

插件描述:移动端上传图片裁剪插件简单版

更新时间:2020-11-16 16:48:02

更新说明:解决图片剪裁后默认图片未改变的问题。

项目需要移动端页面上传图像并进行裁剪,网上找了许多插件,感觉这个比较简单,功能也强大可以进行拖拽,缩放,旋转。

自己做了个简单的demo样式var clipArea = new PhotoClip("#clipArea", {

size: [300, 300], //裁剪框大小

outputSize: [0, 0], //打开图片大小,[0,0]表示原图大小

file: "#file",

view: "#view", //裁剪预览图片id(需要的自行添加)

ok: "#clipBtn",

loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url)

},

    loadComplete: function() { //图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象,并将图片的  对象作为参数传入。

},

done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象,会将裁剪出的图像数据DataURL作为参数传入。

console.log(dataURL); //dataURL裁剪后图片地址base64格式提交给后台处理

}

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值