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


1340 | 292  | 585 | 添加收藏 上一个 下一个
资源描述 : 移动端上传图片裁剪插件简单版
基于PhotoClip移动端上传图片裁剪
资源详情

项目需要移动端页面上传图像并进行裁剪,网上找了许多插件,感觉这个比较简单,功能也强大可以进行拖拽,缩放,旋转。


自己做了个简单的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格式提交给后台处理
    }
});


指尖代码 资源每日更新 www.zjdaima.com