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

所属分类:输入-上传

 22512  114  查看评论 (73)
基于PhotoClip移动端上传图片裁剪 ie兼容11

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

自己做了个简单的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 的实例对象,并将图片的 <img> 对象作为参数传入。
    },
    done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象,会将裁剪出的图像数据DataURL作为参数传入。		
        console.log(dataURL); //dataURL裁剪后图片地址base64格式提交给后台处理
    }
});
相关插件-上传

jQuery多图压缩上传

前端对图片的压缩、可以选择多张、可以预览、还可以删除
  上传
 9010  36

js上传图片预览

js上传图片本地预览
  上传
 68914  218

jQuery图片上传预览带压缩功能

基于jquery 的canvas压缩图片上传到服务器并在前端展示
  上传
 13721  27

pc端图片批量上传,可拖动图片交换位置

jQuery可批量上传图片 可以拖动交换位置 可删除
  上传
 28508  109

讨论这个项目(73)回答他人问题或分享插件使用方法奖励jQ币

    思之雨之 0
    2018/10/9 14:42:06
    老铁,如果我们判断是微信浏览器时使用微信接口选择图片后调用这个插件进行剪裁,这种情况要怎么修改呢。最开始我本来打算通过file的参数来处理,但试了下不成功,求问有没有解决方法? 回复
      0
    2018/9/27 10:40:08
    size: [300, 300], //裁剪框大小 里面的宽高单位怎么 由px改成rem? 回复
    喝君乐宝的提莫 0
    2018/9/25 10:33:13
    楼主 为什么在移动端上会出现缩放图片直接就跑掉的BUG 回复
    废废 0
    2018/9/19 13:15:27
    楼主 这个上传头像的功能需要后台写什么不,能拿到截取后的图片不,前端小白┭┮╊┭┮,求指导 回复
    野渡孤苇CSS 0
    2018/8/28 23:51:44
    为什么选择图片要点半天,体验也太差了吧 回复
    Duo 0
    2018/8/8 15:30:08
    请问一下 我可不可以把选择的图片 当做参数传进去 然后再裁剪呢 回复
    Duo 0
    2018/8/6 18:26:38
    这个设置图片 初始的就是没图片吗 回复
    幸福~手掌 0
    2018/7/30 14:11:16
    怎样设置图片不可以旋转
        幸福~手掌0
        2018/7/30 15:07:14
        解决,注释PhotoClip.js里面的这个_initRotationEvent事件
    回复
    Reset. 0
    2018/7/5 10:37:28
    我想根据上传图片的大小来设置裁剪框的大小,我要怎么实现?
    就是size[]值不是写死的,请问有办法吗? 回复
    还没想好 0
    2018/5/31 11:00:20
    怎么我的JSCSS全部都引用了。但是用不起
    回复
取消回复
  短信接口