移动端图片裁剪

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

 27063  80  查看评论 (51)
移动端图片裁剪 ie兼容11

更新时间:2017/9/30 下午8:31:25

更新说明:应网友要求加入边缘回弹,到达手指拖拽图片边界时会回弹回去。

注:取消了任意角度旋转,因为任意角度使用场景不多,且回弹暂时只支持在90倍数下角度旋转下的。


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

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


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

界面仿微信上传头像

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

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

相关插件-上传,图像

jQuery h5拖拽多文件上传

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

jQuery多图上传图片上传精简版

配置简单功能强大支持进度条限制上传类型文件大小文件数量轻松配置后端值需要写个接口接收文件返回指定信息便可轻松搞定。
  上传
 10351  31

优秀的jQuery无刷新上传插件Uploadify

上传功能在我们的程序中是经常会用到的,而传统的http上传在安全性和文件大小上都会有一定的限制,而且不能看到上传进度。所以就出现了采用Flash和其他一些方式来实现人性化的上传效果。 那么今天我要给大家介绍额就是一款jQuery的无刷新上传插件 -Uploadify,他有免费版和收费版两种,免费版的是用Flash实现的,而收费版的是用html5实现的
  上传
 81941  121

图片预览上传插件bootstrap-fileinput.js

bootstrapfileinput预览上传图片并使用FmData上传,上传url根据实际情况填写
  上传
 11671  56

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

    哎哟哥哥 嗨你好?? 0
    2017/10/17 12:07:31

    为什么不能选择相册里的图片呢?

    回复
    炎龙 0
    2017/10/15 1:09:48

    请问怎么可以去掉旋转图片的控制,不希望图片选择呢

    回复
    马成 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之后

    回复
    Evan 0
    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类型
        })
    回复
    音痴VIP 0
    2017/5/22 13:53:55

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

        Pinocchio。i0
        2017/9/4 16:50:49
        file后面有一个capture="camera"不知道是不是这个原因
    回复
    音痴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

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

    回复
取消回复