基于cropper.js的图片裁剪插件

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

 12486  69  查看评论 (42)
基于cropper.js的图片裁剪插件 ie兼容10

更新时间:2018/2/25 下午1:07:06

更新说明:裁剪框居中问题,由于低版本号的浏览器有些css属性不支持,用js来裁剪框水平垂直居中


1、引入相关的css和js文件。

2、相关js代码都在页面上,根据自己要求修改。

3、cropper.js的参数请参考相关文档。

相关插件-图像,上传

html5前端图片压缩

html5前端图片压缩
  图像
 52346  146

jQuery图片裁剪插件Cropit

Cropit 是款自定义裁剪和缩放图像的jQuery插件
  图像
 18490  48

canvas图片+文字合成

canvas图片+文字合成,实现照片合成效果,界面有点丑但是功能OK的。
  图像
 12413  52

橡皮擦--图片擦除效果

电脑端、移动端(Android、ios等)都可适应!
  图像
 23257  132

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

    qiuyang_0506 0
    2018/8/7 10:52:58
    怎么把剪辑好的图片上传到本地啊? 回复
    幸福~手掌 0
    2018/7/27 13:54:26
    安卓手机裁剪照片时,时间特别长,有参数能判断loading效果的时长吗 回复
    .Tree 0
    2018/7/14 16:15:32
    如何在初始化后改变配置。或者就是动态的去修改配置 回复
    ?? 0
    2018/7/11 20:38:14
    大牛,怎么设置让裁剪玩的图片100kb以内 回复
    ?? 0
    2018/7/11 18:39:16
    作者 上传时怎么压缩图片 回复
    ''独木舟 0
    2018/7/10 22:52:02
    大神您好,请问可以直接拿到vue组件中用吗,谢谢 回复
    88。 0
    2018/6/26 13:57:53
    有大神指教吗 ?QQ:137608575 回复
    ?? 0
    2018/5/10 14:56:27
    作者 我转成blob (size:123445) 这样是对的吗 直接这样传给后台?
        StruggleThunder0
        2018/5/11 15:03:45
        ?,最后提交给后台的是FormData{...}
    回复
    The Anwer 0
    2018/5/9 20:58:56
    作者你好,我使用了你贴出来的将Base64URL转化为blob格式的js代码,提交也正常,数据上传到后台之后是一个叫做blob的文件,没有后缀名,手动加上后缀名之后也不能打开,请问这是什么原因啊
        The Anwer0
        2018/5/9 22:06:13
        已经解决,换了一个把base64URL转换成blob的方法就可以了,按理说作者的方法应该没错才是,不知为何我使用起来就不行,换了一个就好了,可能是与我别的地方的代码有冲突吧,总之,非常感谢作者!!!!!
        StruggleThunder0
        2018/5/10 9:40:26
        //dataURL转成Blob对象
        function dataURLtoBlob(dataURI) {
            //方法一:
            //        var byteString = (dataURI.split(',')[1]);
            //        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
            //        var ab = new ArrayBuffer(byteString.length);
            //        var ia = new Uint8Array(ab);
            //        for (var i = 0; i < byteString.length; i++) {
            //            ia[i] = byteString.charCodeAt(i);
            //        }
            //        return new Blob([ab], {type: mimeString});
        
            //方法二:
            var arr = dataURI.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = (arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }

        嗯嗯,我在项目中是用的方法一,方法二的代码简洁点,两个方法也差不多,..以后我还是用方法一吧。

        ?0
        2018/5/16 18:17:50
        您好,我的在后台接收也是一个blob的文件,使用作者的两个转换方法都不行,请问你是怎么解决的。
    回复
    ?? 0
    2018/5/9 15:31:35
    裁剪完的图片base64 怎么传给后台(后台要string类型) 回复
取消回复
  短信接口