移动端图片裁剪

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

 17828  61  查看评论 (28)
移动端图片裁剪 ie兼容11

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

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

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

界面仿微信上传头像

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

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


相关插件-上传,图像

百度上传插件Web Uploader

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

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

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

上传图片-可裁剪

上传图片可裁剪
  上传
 39715  71

jQuery多图上传插件imgUp.js

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

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

    想起北冰洋 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文件夹下

    回复
    caprast 0
    2017/1/19 16:52:21

    为什么上传不了微信啊

    回复
    cute 0
    2017/1/5 14:01:31
    能不能把代码放在git上,我能说我不会下载吗?在npm上 回复
    蘩? 0
    2016/12/16 11:12:52

    下载新版本后苹果手机不能显示裁剪功能?

        蘩?0
        2016/12/16 14:12:50

        找到了,谢谢大神的插件

    回复
    geget 0
    2016/11/15 14:11:32
    作者你好。我在从你代码仓库中下载的代码演戏。还是在点击旋转后拖动会还原的拖动前。请问是需要修改哪里吗?
        TJc.fool10
        2016/12/15 0:12:49

        这个是由于手势保存的rotate没有和旋转rotate值同步,要在tom-jqplugin.js,增加一个方法,同步插件内的rotate

        TJc.fool10
        2016/12/15 1:12:52

        去npm下载最新的吧 npm i upload_img_plugin

    回复
    刺猬的手指 0
    2016/10/13 13:10:56
    问一下   这个插件支持微信的吗
        十一0
        2016/12/14 17:12:01

        你剪切结果会不会出现跟想要的不一样

    回复
    刺猬的手指 0
    2016/10/13 13:10:55
    我前台用手机测试更换头像是可以的   后台用tumcat挤  调用这个页面  能选择图片  无法剪切  (选择完图片没有效果)  这是什么原因那 回复
取消回复