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

所属分类:输入-上传

 19026  103  查看评论 (63)
基于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图片上传预览带压缩功能

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

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 32914  169

zyupload图片上传修改版

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

jquery多图片上传

多张图片上传,显示
  上传
 199964  430

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

    Reset. 0
    2018/7/5 10:37:28
    我想根据上传图片的大小来设置裁剪框的大小,我要怎么实现?
    就是size[]值不是写死的,请问有办法吗? 回复
    还没想好 0
    2018/5/31 11:00:20
    怎么我的JSCSS全部都引用了。但是用不起
    回复
    . 0
    2018/5/24 16:02:39
    如何从外部传入裁剪框的大小呢?我现在在外面传给size:[width,height]没用 回复
    HeAr~ 0
    2018/5/15 11:45:56
    请问您的这个插件旋转时候能不能不是旋转90度,而是随着手势慢慢的转角度。 回复
    红杉树 0
    2018/4/27 1:20:43
    小米4手机上,input使用属性multiple,通过拍照上传后,上传不成功,显示一张黑色的图片,返回的base64的格式应该是错误的,难道不支持安卓的小米手机拍照功能。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 回复
    红杉树 0
    2018/4/26 1:43:49
    点击裁剪按钮,获得dataURL,快速点击裁剪按钮两次,会裁出两张图片,怎样避免???
        .0
        2018/5/15 11:12:11
        js上加个flag判断下吧
    回复
    时光经年 0
    2018/4/18 9:58:05
    一次性 能不能只选择 一张图片 回复
    wei132 0
    2018/4/7 10:30:47
    蔷葳的箐锷 0
    2018/3/9 16:34:34
    如果默认需要显示裁剪的图片如何设置参数呢?
        小桥流水0
        2018/3/20 16:59:21
        找到如何设置参数了吗
    回复
    0
    2018/3/5 14:00:48
    只能移动端,不可以手机端吗
    回复
取消回复