移动端图片裁剪

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

 22133  66  查看评论 (40)
移动端图片裁剪 ie兼容11

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

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

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

界面仿微信上传头像

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

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


相关插件-上传,图像

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 63591  559

H5移动前端图片批量压缩上传

在移动端压缩图片并且上传主要用到filereader、canvas 以及 fmdata 这三个h5的api
  上传
 30653  86

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 51625  348

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件。该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便。
  上传
 36888  121

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

    温凉。 0
    2017/6/4 12:59:27

    怎么不转换层base64?

        TJc.fool11
        2017/6/9 22:06:28

        有base64和file类型两种

        cropInfo=myCrop.getCropFile({});
            cropInfo.src //base64 
            cropInfo.dfd.done(function(blob){
            //blob 是file类型
        })
    回复
    音痴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.});

    回复
取消回复