评论：移动端图片裁剪  [查看原文]

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

 67086  426  78
当前第2页 / 共3页
    马成0
    2017/8/1 13:02:31

    初始化的时候我想裁剪成圆的图片，怎么设置

        TJc.fool11
        2017/8/4 22:48:09

        暂时不支持圆的，如果你需要裁剪圆的，我建议自己修改tomLib.js，在getCropFile函数里利用globalCompositeOperation属性的destination-in值可将图片处理为圆形

        决战黎明0
        2017/9/4 9:28:44

        具体步骤怎样裁剪成圆形的图片呢？求解，拜托了。

    回复
    长乐未央?长毋相忘0
    2017/7/18 14:26:50
    $needCropImg[0].src = './img/1.jpg?' + Math.random();

    为什么换成网络地址就不可以

    $needCropImg[0].src = 'http://img.mp.itc.cn/upload/20160811/d4d58e59d45440bba4810ed2d726b203_th.jpg';
        TJc.fool10
        2017/8/4 22:33:55

        网络图片是可以的，注意bindPreview时要绑定的是一个<img 标签

        TJc.fool11
        2017/8/4 22:44:28

        同时需要注意的是赋值要放在初始化myCrop之后

    回复
    Evan0
    2017/6/30 16:31:03
    请问你这个画布初始化在哪块啊，我想给画布初始化时放一个图片，以这个为背景图片，
        TJc.fool13
        2017/7/13 10:08:49

        画布其实就是图片本身，拖拽时也是图片本身。

        1.如果你要做一个固定背景的话，你可以修改源码getCropFile方法，在第一行加入ctx.drawImage(yourBgImg,x,y,w,h)，即可合成图片//下文附送一下如何获取裁剪参数

        2.如果你需要两个图联动该插件本身是不支持的，但你可以多创建个图片同时拖动（可能会有视觉残留）

        a.

        <div class="preview-box">
    <img id="myBg"/> </div><img id="preview"/>
</div>

        b.在页面的onLoad函数里初始化myBg图片位置手势监听函数gestureCb加入

        $myBg.css('transform位移//同$preview

        c.在生成图片函数时，getCropFile函数 ctx.drawImage前一行仿照此方法加入你的

        ctx.drawImage(G.preview, x, y, o.dWidth * G.scale, o.dHeight * G.scale);
var cropImage = function(img, opts) {
    opts = opts || {
        width: 300,
        height: 300
    }
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    canvas.width = opts.width;
    canvas.height = opts.height;
    var info = getCropInfo(img.naturalWidth, img.naturalHeight, opts.width, opts.height) ctx.drawImage(img, info.x, info.y, info.w, info.h) return canvas.toDataURL('image/png')
}
var getCropInfo = function(ow, oh, iw, ih) {
    var o = {
        x: 0,
        y: 0,
        w: 0,
        h: 0
    };
    if (ow / oh > iw / ih) {
        o.h = ih;
        o.w = ow / oh * ih;
        o.x = -(o.w - iw) * (oh / ih) / 2;
    } else {
        o.w = iw;
        o.h = oh / ow * iw;
        o.h = -(o.h - ih) * (ow / iw) / 2;
    }
    return o;
}
var img = new Image;
img.onload = function() {
    var src = cropImage(img);
    preview.src = src;
}
img.src = 'Koala.jpg'
    回复
    温凉。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类型
})
    回复
    音痴VIP0
    2017/5/22 13:53:55

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

        Pinocchio。i0
        2017/9/4 16:50:49
        file后面有一个capture="camera"不知道是不是这个原因
        微笑@么么哒！0
        2018/3/13 22:14:49
        是这个原因，把这个属性去掉就好了
    回复
    音痴VIP0
    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

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

    回复
    laly0
    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文件夹下

    回复
    caprast0
    2017/1/19 16:52:21

    为什么上传不了微信啊

    回复

讨论这个项目（78）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复