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

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 87156  723

多图片上传预览(纯前端)

多图片上传预览,已测试ie 360 火狐 谷歌浏览器
  上传
 172521  276

jquery头像上传剪裁插件cropper

cropper是一款使用简单且功能强大的图片剪裁jQuery插件
  上传
 40591  324

zyupload图片上传修改版

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

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

    E都市001 0
    2018/1/13 17:02:49

    弱弱的问下:有没不是base64的图片地址,如何取得这个地址,好上传给后台呢

    回复
    余舟Jason 0
    2018/1/10 19:41:40
    xzh97 0
    2017/12/29 16:59:59
    演示的时候。。。 第二次进去的时候,裁剪的位置就在左上角,而且照片拉不动了
        xzh970
        2017/12/29 17:00:43

        突然一下有这个问题,然后后面再试的时候   偶尔出现了一下

    回复
    nichi 0
    2017/12/29 14:20:10

    请问为什么我缩放图片的时候图片会跑偏呢?

    回复
    ztop911 0
    2017/12/28 16:26:46

    没有jq币怎么看。。。

    回复
    晨萧 0
    2017/12/27 15:37:39

    请问当一个页面中有多个地方需要用到图片裁剪上传的,该怎么设置才相互不冲突呢

    回复
    之瑶 0
    2017/12/17 14:37:04
    我怎么可以没有预览框,直接达到演示中那种弹出框的是设置呢? 回复
    . 0
    2017/12/12 17:23:06
    如何返回流文件,不需要base64位 回复
    540927603 0
    2017/12/11 18:05:00

    多图上传能给个demo吗?

    回复
    你是猪吗? 0
    2017/12/2 17:11:51

    你好,请问如何限制图片上传的大小呢?我做了file.size的判断,但是图片还是显示上去了

    回复
取消回复