PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > JavaScript教程 > 正文

    js图片压缩插件localResizeIMG参数文档

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:js图片压缩插件localResizeIMG参数文档参数lrz(file, [options]);file 通过 input:file 得到的文件,或者直接传入图片路径[options] ...
    js图片压缩插件localResizeIMG参数文档

    参数

    lrz(file, [options]);
    file 通过 input:file 得到的文件,或者直接传入图片路径

    [options] 这个参数允许忽略

    width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。
    height {Number} 同上
    quality {Number} 图片压缩质量,取值 0 - 1,默认为0.7
    fieldName {String} 后端接收的字段名,默认:file

    返回结果

    返回值是一个promise对象

    then(rst)

    rst.formData 后端可处理的数据
    rst.file 压缩后的file对象(默认已经丢在rst.formData有一份了),需要注意的是如果压缩率太低的话,这个会是原始的file对象
    rst.fileLen 生成后的图片的大小,后端可以通过此值来校验是否传输完整
    rst.base64 生成后的图片base64,后端可以处理此字符串为图片,也直接用于img.src = base64
    rst.base64Len 生成后的base64的大小,后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)
    rst.origin 也就是原始的file对象,里面存了一些原始文件的信息,例如大小,日期等。
    catch(err)

    always()

    一个例子

    document.querySelector('input').addEventListener('change', function () {
        // this.files[0] 是用户选择的文件
        lrz(this.files[0], {width: 1024})
            .then(function (rst) {
                // 把处理的好的图片给用户看看呗

                var img = new Image();
                img.src = rst.base64;

                img.onload = function () {
                    document.body.appendChild(img);
                };

                return rst;
            })

            .then(function (rst) {
                // 这里该上传给后端啦

                /* ==================================================== */
                // 原生ajax上传代码,所以看起来特别多 ╮(╯_╰)╭,但绝对能用
                // 其他框架,例如jQuery处理formData略有不同,请自行google,baidu。
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'http://localhost:5000/');

                xhr.onload = function () {
                    if (xhr.status === 200) {
                        // 上传成功
                    } else {
                        // 处理其他情况
                    }
                };

                xhr.onerror = function () {
                    // 处理错误
                };

                xhr.upload.onprogress = function (e) {
                    // 上传进度
                    var percentComplete = ((e.loaded / e.total) || 0) * 100;
                };

                // 添加参数
                rst.formData.append('fileLen', rst.fileLen);
                rst.formData.append('xxx', '我是其他参数');

                // 触发上传
                xhr.send(rst.formData);
                /* ==================================================== */

                return rst;
            })

            .catch(function (err) {
                // 万一出错了,这里可以捕捉到错误信息
                // 而且以上的then都不会执行

                alert(err);
            })

            .always(function () {
                // 不管是成功失败,这里都会执行
            });
    });
    JQuery 处理

    例子中给的是原生ajax的方式,下面是JQuery上传的方式

    注意!!:使用 zepto 的朋友请用 原生 或 jquery代替,在某些 android 设备下用 zepto 会出现不发送 Content-Type 导致无法上传的BUG。 感谢 @Poised_flw

    // 额外添加参数
    rst.formData.append('fileLen', rst.fileLen);

    $.ajax({
        url: 'http://koa-upload.coding.io', // 这个地址做了跨域处理,可以用于实际调试
        data: rst.formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (data) {
            alert(JSON.stringify(data));
        }
    });
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-69-5392-1.html
    相关热词搜索: