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

所属分类:输入-上传

 1123  12  查看评论 (2)
基于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上传插件pictureHandle.js

基于jquery上传插件pictureHandle.js,带压缩、且代码注释全
  上传
 9752  24

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 73674  626

百度上传插件Web Uploader

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

Web文件上传模块Plupload

Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。
  上传
 34591  24

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

    SiriBen 0
    2017/9/15 16:14:52

    手机扫码页面加载一片空白,PC浏览器剪裁无效果,控制台只能得到一个base64

        干脆面君0
        2017/9/18 18:18:08

        那个不是扫码页面,用来裁剪的,那个得到的base64是裁剪完成后的回调的参数,不建议用在PC端上,兼容要求高,标题已经说明用在移动端的。

    回复
取消回复