评论:基于cropper.js的图片裁剪插件  [查看原文]

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

 70346  467  73
当前第3页 / 共3页
    wudachen1230
    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
    回复
    wudachen1230
    2018/4/13 9:34:55
    裁剪完成后返回给后台的图片数据在哪里,求告知
        StruggleThunder1
        2018/4/13 11:09:20
        /*需要将dataURL转成Blob对象. 这儿在全局写个方法*/
        function dataURLtoBlob(dataURI) {
            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
            });
        }
        /*在全局new 一个 FormData()的对象*/
        var fd = new FormData();
        /*裁剪后处理里面*/
        var blob = dataURLtoBlob(base64url);
        fd.append('file', blob)
        /*最后 将fd 提交post 给后台 */
        function submitImg() {
            $.ajax({
                type: "post",
                url: url,
                data: fd,
                processData: false, // 不会将 data 参数序列化字符串
                contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    //console.log(data)
                },
                error: function(err) {
                    console.log("上传失败");
                    console.log(fd);
                }
            });
        }
        wudachen1230
        2018/4/13 14:06:21
        好的谢啦
        恒智~吕0
        2018/4/18 14:49:03
        这种全局直接new FomeData对象会不会冲突,js全局的东西都看着不是很保险
        StruggleThunder0
        2018/4/19 10:06:16
        不会,变量名确保不要重了就行
        恒智~吕0
        2018/4/19 11:56:16
        大牛,我用了那个传数据,但是FormData()对象存不进去值,不用对象的话传到后台又会被转义,唉项目不是前后分离,各部分代码也都是不同时期的前端工程师写的,谁知道这些鬼变量会不会重名
        StruggleThunder0
        2018/4/19 14:33:02

        后台会给接口给你           url:"上传接口的地址"。
        全局变量名在当前这个里面的不要重名就行。
        你可以做个小测试:

        <script>
           var variable = "这里面是没有ajax";
           console.log(variable);
        </script>
        
        <script>
        var variable = "这里面是有ajax的";
           $("html").click(function () {
               $.ajax({
                   type: "post",
                   url: "http://www.baidu.com", //随便给个地址
                   data: variable,
                   processData: false,
                   contentType: false,
                   xhrFields: {
                       withCredentials: true
                   },
                   success: function(data) {
                       //console.log(data)
                   },
                   error: function(err) {
                       console.log(variable); //输出:   这里面是有ajax的
                   }
               });
           });
        </script>
        恒智~吕0
        2018/4/20 9:49:42
        我的微信:AA13891964141
        我的QQ:2916669400
        fd.append('file', blob)
        fd对象没有值
        StruggleThunder1
        2018/4/20 18:01:49
        console.log(fd.append('file',blob)); //这样是找不到的

        你想看里面的值 你可以这么打印,这样就能看到file里面的一些数据了

        console.log(fd.get("file"));

        提交给后台只需要提交  fd 就行了
        --------------------------------
        已经加你QQ了

    回复
    德仁darin0
    2018/3/27 20:23:00
    元大明0
    2018/3/26 11:14:05
    这个插件不错,直接兼容了 回复
    Yoke0
    2018/3/5 19:52:48
    3612581770
    2018/2/25 12:13:35
    前排收藏,感谢作者
    回复

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

取消回复