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

所属分类:输入-上传

基于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格式提交给后台处理
    }
});
相关插件-上传

zyupload图片上传修改版

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

百度上传插件Web Uploader

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。
  上传
 148577  269

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件。该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便。
  上传
 47354  145

基于H5的图片拖拽和预览插件dropify

基于HTML5,能支持将本地图片拖入网页并预览图片的插件。
  上传
 21252  75

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

    天天 0
    2017/11/16 13:39:32

    选择图片后,ios可以放大缩小,但是安卓不支持用手势放大缩小,请问有解决办法么。是安卓设置问题么?

    回复
    mov说的话都觉得回到家大家 0
    2017/11/12 11:21:17

    请问如何让截取出的图片尺寸是固定尺寸?比如所有图片截图出来的尺寸都是100*100,在哪设置?谢谢,我下载了这个源码,不会改这里

    回复
    tin小凉 0
    2017/11/9 15:51:50

    请问需要后台的功能实现吗?服务器还没有搭建后台的

    回复
    [ 我还在, ] 0
    2017/11/6 21:32:14
    返回的结果不要base64的,返回正常图片格式怎么修改呢 回复
    子非鱼,安知鱼之乐? 0
    2017/10/25 16:04:47
    一个页面2个上传总么搞
        干脆面君0
        2017/10/30 10:23:39

        做了多图上传的,不过懒得弄上来了,根据这个插件原理改改就可以了

    回复
    刘鹏飞 0
    2017/10/18 11:16:37

    这个不能直接调取摄像头拍照上传是吧??

        干脆面君1
        2017/10/19 14:52:46

        可以的,只不过我把input的拍照属性关了的,安卓很多手机拍照容易崩

    回复
    ??? 0
    2017/10/16 14:00:22

    这个插件完美支持移动端吗?缩放及旋转很重要。

    回复
    Centaurea cyanus 0
    2017/10/13 15:48:37
    请问我怎么不要中间那个遮罩层,点击设置图像就直接选择图片呢????
        Centaurea cyanus0
        2017/10/13 15:50:01

        选择以后,不知道怎么调用剪裁那个方法了

    回复
    WckY 0
    2017/9/30 11:52:19

    插件很棒 注释也写的很清楚 但有一点完善一下可能会更好。目前裁剪成功后执行的回调函数,最终将图片转base64交给后台处理,但更多的应用场景是用户在当前h5页面可以直接预览 看到裁剪过后的图片 所以我想请问下楼主 这如何修改 -.-

        干脆面君1
        2017/9/30 15:51:30

        预览超简单,完成的返回的dataURL可以直接放到img标签的src里显示出来的

        淡然一笑0
        2017/11/4 16:45:12

        我试了一下,把dataURL直接给头像img标签的src并没有出来?

        淡然一笑0
        2017/11/4 17:04:50

        可以了,不好意思,是我自己写错了

        苦瓜0
        2017/11/7 9:41:17
        我的预览显示不出来啊,怎么弄
        苦瓜0
        2017/11/7 11:09:54
        我已经弄出来了
    回复
    春风戏雨 0
    2017/9/29 11:29:51

    老铁,你怎么那么厉害呢,特感谢

        干脆面君1
        2017/9/30 16:20:42

        这款是极少数可以拍照上传的(ios拍照禁不了),当初找了好多说移动端上传的,一拍照根本获取不到文件。

    回复
取消回复