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

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

基于cropper.js的图片裁剪插件 ie兼容10

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

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


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

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

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

相关插件-图像,上传

jQuery切图插件(原创)

基于jQuery实现的类似ps切图工具
  图像
 1803  20

jQuery放大镜插件jqzoom.js

jQuery放大镜插件jqzoom.js
  图像
 32840  87

svgmap地图

svgmap实现中国地图。
  图像
 26033  169

基于HTML5 Canvas实现的图片马赛克模糊特效

基于HTML5 Canvas实现的图片马赛克模糊特效
  图像
 8842  32

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

    ?? 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类型) 回复
    不拘小节 0
    2018/5/9 10:28:40
    设置了不让移动裁剪框,不起作用 回复
    se759787326 0
    2018/4/29 2:23:39
    更改裁剪框大小设置为false好像没作用 回复
    浅笑° Suns 0
    2018/4/26 16:26:40

    七牛返回的数据是

    domain:"qiniu.dayuanren.cn"
    hash:"FomC_mB71sAETqp8JHPU-mMPgiYs"
    key:"1524731075blob"
    url:"http://qiniu.dayuanren.cn/1524731075blob

    这样的,这个链接放在图片里面不会显示出来

        StruggleThunder0
        2018/4/28 12:21:19
        路径打开后就下载一个文件,下载的文件打开里面是差了些前缀的base64编码。图片存的时候或上传的时候格式有问题吧
        qiao1230
        2018/5/29 11:51:20
        大神,七牛结合这个擦件会出问题吗
    回复
    浅笑° Suns 0
    2018/4/26 16:17:24

    你好,我上传到本地服务器或者七牛以后返回的是一个文件,而不是一个图片,本地的是这样的

    (http://localhost/genealogy/public\uploads/20180426\61b6e02fbd62048bcdbf2e9318cc5f20.)

    请问我要怎么处理啊

        StruggleThunder0
        2018/4/28 12:13:46
        应该返回的是图片的虚拟路径。感觉这路径怪怪的,最后有个“.”
    回复
    0n1zvka 0
    2018/4/21 18:36:03
    作者您好,请问下这个图片被裁减完毕后该怎么传给后台上传数据库,我项目是基于s2sh的,谢谢
        StruggleThunder0
        2018/4/22 17:12:11
        你好,java的东西我不会。之前的评论有将哪个传递给后台。传过去了就是后台做的事了,后台的东西也不太懂。.......最后应该就是绝对路径存在服务器上,虚拟路径存在数据库里。
        0n1zvka0
        2018/4/23 22:36:11
        好的,我自己在研究一下,谢谢您的回答
    回复
    友人A 0
    2018/4/20 15:01:51
    能设置裁剪后的图片大小吗?例如 裁剪后我想获得128*128像素的头像,本人小白菜一枚,希望作者能告知,实在万分感谢啊~~~
        StruggleThunder0
        2018/4/20 21:26:02
        裁剪出来的尺寸大小 是裁剪框的大小,裁剪框的大小是按比例来的。128*128比例是 1:1 。
        如果你要获得一个固定尺寸的图片,你可以将裁剪出来后的图片重新画入一个canvas里面,设置这个canvas的宽高(128*128),再将这个canvas转成图片的形式。
        友人A0
        2018/4/23 8:41:50
        非常感谢~~!!
    回复
    wudachen123 0
    2018/4/18 15:19:06
    如何的对的上传的图片的大小做限制?以及裁剪完成后大小是多少?可以限制吗
        StruggleThunder1
        2018/4/19 10:16:31
        /**
           * 获取选择的图片储存大小 img_storage
            * 在selecImg(file)方法里面写
            * 之后再做判断
            */
        var img_storage = file.files[0].size / 1024; //这里单位是KB
        /*再裁剪后处理 里面最后*/
        var cutImg_storage = fd.get("file").size / 1024; //裁剪之后的大小 KB
    回复
取消回复