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

所属分类:输入-上传

 49423  418  查看评论 (93)
分享到微信朋友圈
X
基于PhotoClip移动端上传图片裁剪 ie兼容11

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

zyupload图片上传修改版

在原zyupload基础上增加了放大,删除,目录选择功能 。上传的图片可以轮播查看, 上传图片有拖拽图片和文件功能
  上传
 52153  342

js上传图片预览

js上传图片本地预览
  上传
 104526  496

jQuery图片上传预览支持拖拽

上传单个图片,同时支持将图片拖拽在框中
  上传
 51874  356

兼容所有浏览器的多图上传预览(原创)

兼容所有浏览器的多图上传预览兼容IE 789.在一个界面上展示到固定标签业务场景:答题添加图片匹配题目一个选项一个题目
  上传
 68964  538

讨论这个项目(93)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    zh0426 0
    2019/12/27 18:13:34
    vue可以用这个插件吗 回复
    西安工作吧 0
    2019/9/25 19:40:44
    Script error.
    filename:
    lineno:0
    ios 报了个这个错,不知道为什么
        西安工作吧0
        2019/9/25 19:41:19
        android没有,楼主,你有遇到过没
    回复
    Mars_Lay 0
    2019/4/25 21:52:06
    在ios中缩放图片会出现图片飞走的BUG 有解决方案吗 回复
    freeyearse 0
    2019/4/7 2:36:20
    这是我找到最完美的裁剪器,基本所有的功能都 实现了。 回复
    纵马. 0
    2019/3/30 21:33:08
    楼主 为什么在移动端上会出现缩放图片直接就跑掉的BUG 回复
    silence5 0
    2019/3/29 14:41:24
    June 0
    2019/3/15 14:30:00
    请问是怎么做到图片360度自由旋转的 回复
    shenqinqiang 0
    2019/3/11 23:33:02
    下载的文件和演示的插件版本不一致,差评!
        西瓜0
        2019/3/12 0:34:33
        这里刚测试,是一样的。
        June0
        2019/3/15 14:30:51
        我也是一样的
    回复
    ┽_珍藏版_ 0
    2019/2/13 11:06:33
    TypeError: $n.parents().andSelf is not a function. (In '$n.parents().andSelf()', '$n.parents().andSelf' is undefined)
    jquery.photoClip.js第490行报错,这是什么原因
        杜神0
        2019/7/2 13:00:55
        jquery版本太高了
    回复
    [!..!] 0
    2018/11/7 21:50:55
    怎么点击完成裁剪 就跳出来了 图片也没有被裁剪 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复