lrz压缩图片,上传七牛

前端之家收集整理的这篇文章主要介绍了lrz压缩图片,上传七牛前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参考文档:

1.http://blog.csdn.net/zhongbaolin/article/details/49817611

2.https://github.com/think2011/localResizeIMG

3.http://yunzhu.iteye.com/blog/2177923

4.http://blog.csdn.net/inuyasha1121/article/details/51915742

5.https://segmentfault.com/q/1010000005012250?_ea=753141


demo下载地址:http://download.csdn.net/detail/u010947098/9725884


通过lrz压缩图片,然后上传七牛服务器。

lrz压缩图片网上案例挺多的,我也主要是卡在上传七牛服务器上,一直在使用七牛提供的qiniu js sdk来上传图片,但是七牛提供的jssdk是在plupload的基础上扩展的,自带的压缩功能,只支持jpg压缩,不支持png;然后就决定使用lrz,但是使用七牛jssdk一直无法上传七牛服务器;最后通过Android上传七牛服务器,抓包查看传输的数据包,然后使用ajax异步请求,发送FormData数据,成功上传;通过lrz也完成了图片的压缩功能,心里美美的。

下面贴出我写的代码代码是在lrz项目的基础上改的供大家参考:

在这里,感谢参考文档的作者。

window.onerror = function (errMsg,scriptURI,lineNumber,columnNumber,errorObj) {
    setTimeout(function () {
        var rst = {
            "错误信息:": errMsg,"出错文件:": scriptURI,"出错行号:": lineNumber,"出错列号:": columnNumber,"错误详情:": errorObj
        };

        // alert('出错了,下一步将显示错误信息');
        // alert(JSON.stringify(rst,null,10));
    });
};

[].forEach.call(document.querySelectorAll('[data-src]'),function (el) {
    (function (el) {
        el.addEventListener('click',function () {
            el.src = 'img/loading.gif';

            lrz(el.dataset.src)
                .then(function (rst) {
                    el.src = rst.base64;


                    return rst;
                });
        });

        fireEvent(el,'click');
    })(el);
});

document.querySelector('input').addEventListener('change',function () {
    var that = this;


    lrz(that.files[0],{width: 800})
        .then(function (rst) {
            var formData = new FormData();
            formData.append("token","qhdmC1G_UymRGGXSjNRjnlxC9i-RsGQbJokSZjFz:mzflI37NImtAJIkxWFuXksa4JpA=:eyJzY29wZSI6Inlsenl5eSIsImRlYWRsaW5lIjoxNDgzMTAxMzUzfQ==");
            formData.append("file",rst.file);
            $.ajax({
                type: "POST",url: "http://upload.qiniu.com/",data: formData,async: false,cache: false,contentType: false,processData: false,beforeSend: function (XMLHttpRequest) {
                    //showLoader();
                },success: function (data) {

                    if ("1" == data.error) {
                        alert(data.message);
                        return false;
                    } else {
                        alert(data.thumbnail);

                        return false;
                    }
                },complete: function (XMLHttpRequest,textStatus) {
                    hideLoader();
                },error: function (XMLHttpRequest,textStatus,errorThrown) { //上传失败
                    //hideLoader();
                    //alert('操作错误');
                }
            });
            return rst;
        });
});

document.querySelector('#version').innerHTML = lrz.version;
document.querySelector('.UA').innerHTML = 'UA: ' + navigator.userAgent;

function toFixed2(num) {
    return parseFloat(+num.toFixed(2));
}

/**
 * 替换字符串 !{}
 * @param obj
 * @returns {String}
 * @example
 * '我是!{str}'.render({str: '测试'});
 */
String.prototype.render = function (obj) {
    var str = this,reg;

    Object.keys(obj).forEach(function (v) {
        reg = new RegExp('\\!\\{' + v + '\\}','g');
        str = str.replace(reg,obj[v]);
    });

    return str;
};

/**
 * 触发事件 - 只是为了兼容演示demo而已
 * @param element
 * @param event
 * @returns {boolean}
 */
function fireEvent(element,event) {
    var evt;

    if (document.createEventObject) {
        // IE浏览器支持fireEvent方法
        evt = document.createEventObject();
        return element.fireEvent('on' + event,evt)
    }
    else {
        // 其他标准浏览器使用dispatchEvent方法
        evt = document.createEvent('HTMLEvents');
        // initEvent接受3个参数:
        // 事件类型,是否冒泡,是否阻止浏览器的默认行为
        evt.initEvent(event,true,true);
        return !element.dispatchEvent(evt);
    }
}

/**
 *
 *    ┏┓   ┏┓
 *   ┏┛┻━━━┛┻┓
 *   ┃       ┃
 *   ┃   ━   ┃
 *   ┃ ┳┛ ┗┳ ┃
 *   ┃       ┃
 *   ┃   ┻   ┃
 *   ┃       ┃
 *   ┗━┓   ┏━┛Code is far away from bug with the animal protecting
 *     ┃   ┃    神兽保佑,代码无bug
 *     ┃   ┃
 *     ┃   ┗━━━┓
 *     ┃      ┣┓
 *     ┃     ┏┛
 *     ┗┓┓┏━┳┓┏┛
 *      ┃┫┫ ┃┫┫
 *      ┗┻┛ ┗┻┛
 *
 */
原文链接:https://www.f2er.com/ajax/161533.html

猜你在找的Ajax相关文章