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

所属分类:输入-上传

 14413  85  查看评论 (54)
基于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格式提交给后台处理
    }
});
相关插件-上传

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 26850  118

zyupload四种不同的上传PHP版

PHP支持拖拽和裁剪的一款上传插件:zyupload。在js里面可以自定义高度和宽度,类型,远程上传地址等。
  上传
 22166  71

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 29221  159

jQuery多图上传插件imgUp.js

可以多图的上传,预览,并带删除功能
  上传
 54695  475

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

    时光经年 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
    只能移动端,不可以手机端吗
    回复
    高大帅气的长腿 0
    2018/1/25 12:01:06

    剪裁后的图片已显示在<img src="" id="view">中,请问怎么在另一个方法中获取到剪裁后的地址,

    回复
    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

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

        天空中的霞光0
        2018/3/7 16:21:03
        是卡了吗
    回复
    nichi 0
    2017/12/29 14:20:10

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

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

    没有jq币怎么看。。。

    回复
取消回复