移动端图片裁剪

所属分类:输入,媒体-上传,图像

 20869  63  查看评论 (38)
移动端图片裁剪 ie兼容11

更新时间:2017/1/18 下午1:52:04

更新说明:修正图片放大旋转算法。另外可以直接修改一张已有的图片而非上传的。

本插件支持图片定制尺寸的裁剪,放大,缩小旋转,修正了ios图片旋转bug。

界面仿微信上传头像

使用了require.js封装了比较多自己的插件

你会喜欢上的,谢谢使用,bug反馈请qq:921552495


相关插件-上传,图像

上传图片-可裁剪

上传图片可裁剪
  上传
 44519  78

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 15825  87

HTML5 图片上传(pc ,手机都能适配)

图片上传(pc ,手机都能适配)
  上传
 58059  93

html5文件上传插件Pure HTML5 file upload

html5文件上传插件Pure HTML5 file upload
  上传
 21764  60

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

    音痴VIP 0
    2017/5/22 13:53:55

    为什么苹果机上只能调取相机却调不了相册了。

    回复
    音痴VIP 0
    2017/5/20 14:25:41

    不能二次上传了,是什么原因?

    回复
    此堂一般甜 0
    2017/5/12 11:54:18

    作者你好 为什么我生成的base64  不能解析

    回复
    嘴角・~上?``` 0
    2017/4/28 9:29:20
    插件为什么不能调用手机的相册
        TJc.fool10
        2017/5/2 15:11:36

        有些版本的安卓是不行,不是插件本身问题,是系统限制了

    回复
    百味人生逐个尝 0
    2017/4/24 10:48:16
    在ios的微信下不能使用?上传图片后没有反应?
        TJc.fool10
        2017/4/25 17:30:32

        是iphone几,ios什么版本呢?

    回复
    ⑥?№★???? 0
    2017/3/31 15:36:18
    移动端页面  使用完这个插件  为什么页面不能滑动了??
        馨心紫莎0
        2017/4/21 16:20:48

        我也遇到了同样的问题

        TJc.fool11
        2017/4/22 17:45:34

        页面里有个listener使用了 touchmove preventDefault,你可以在插件关闭时removeListener

    回复
    想起北冰洋 0
    2017/3/9 18:38:09
    点使用ajax提交给后台的数据是data:formData,但是我打印console.log(formData)是个空对象FormData {},所以我怎么把剪裁后的图片传给后台?cropInfo=myCrop.getCropFile({});我把这个打印出来:Object {src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAA…BBP+mZBm/nh+Xyer18vn/Fmo/++1OL2UAAAAASUVORK5CYII=", dfd: Object, file: File},是把formData还是cropInfo提交给后台吗?那个scr是一堆什么?base64码吗?这个可以直接传给java后台吗?
        想起北冰洋0
        2017/3/10 10:10:59

        我看懂了,上传图片剪裁时是传那个data:{base64:cropInfo.src.substr(22),uploadType:'base64'},到后台,cropInfo.src是一堆编码,直接放到<img>的src就能显示出图片,但是仍然搞不明白传给后台为什么要cropInfo.src.substr(22)这样处理一下?抽取前22个字符串吗?那后台存了这个当页面再次需要这个图片把这22个字符串传到页面图片就显示不出来了,因为只有前22个不全?

        TJc.fool11
        2017/3/14 13:45:30

        抽取出来的原因是因为我写的php代码将base64保存成文件格式,而前缀

        data:image/png;base64,这22个字符对于文件来说是多余的,当然你如果直接保存base64字符串也是可以的

        TJc.fool11
        2017/3/14 13:51:34

        dfd是一个promise对象;你可以通过这个直接提交一个文件给后端,

        dfd.then(function(blob){
           var form=FormData;
            form.append('myFile',blob);
            //your ajax codes
        });
    回复
    想起北冰洋 0
    2017/3/9 17:03:16

    这个插件叫什么名字,有没有比较全的文档

    回复
    laly 0
    2017/2/28 11:27:11

    没有api吗?

        TJc.fool10
        2017/2/28 13:58:44

        我后面整理一下吧

        TJc.fool10
        2017/2/28 21:55:58
        更新时间:2017/2/28 下午9:51:25

        更新说明:

        使用说明:

        1.调用方法 var myCrop=T.cropImage({options});

        2.获取图片地址 var cropInfoObj=myCrop.getCropFile({type:"jpeg"});//return {src:base64String,dfd:Promise}

        3.获取图片文件 cropInfoObj.dfd.done(function(blobFile){ //do sth.});

    回复
    雷子 0
    2017/2/16 16:44:40

    作者你好 我这里一直报一个错        

    var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id);

    这个地方错了 能帮忙指导一下么

        TJc.fool10
        2017/2/23 10:55:06

        你这个是requirejs的错误,检查一下你有没有引入requirejs,以及requirejs配置path路径

        想起北冰洋0
        2017/3/9 16:35:17

        我遇到和你一样的报错,而且有n多处,后来发现,虽然下载的dome里只引用了这三个js:但是,其实下载的资源包的js文件夹里的这些文件:都要放到你自己的工程里才ok。

        想起北冰洋0
        2017/3/9 16:38:11

        哎,我的截图都看不到:

        该图片上传剪裁功能在html里引入这三个文件:require.js, main.js, canvas-toBlob.js,

        但其实,这些文件exif.js, jquery-2.1.4.js, jquery-private.js, megapix-image.js, tom.Lib.js, Hammer文件夹,plugins文件夹都必须保存在改项目的js文件夹下

    回复
取消回复