移动端图片裁剪

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

 24410  74  查看评论 (47)
移动端图片裁剪 ie兼容11

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

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

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

界面仿微信上传头像

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

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


相关插件-上传,图像

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

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

jQuery多图上传插件imgUp.js

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

Plupload文件上传插件

Plupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传。
  上传
 122438  135

jQuery h5拖拽多文件上传

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

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

    马成 0
    2017/8/1 13:02:31

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

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

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

    回复
    长乐未央?长毋相忘 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

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

    回复
    音痴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

    回复
取消回复