html5压缩图片并上传

阳光穿透心脏的1/2处 2022-08-04 12:59 249阅读 0赞

手机端图片有很大的，上传的时候很慢，这时候就要压缩一下了，有一个开源的js可以压缩图片的大小，开源地址如下：[https://github.com/think2011/localResizeIMG3][https_github.com_think2011_localResizeIMG3]

代码如下：

// 上传图片
        function uploadFile(path) { 
            var type = plus.storage.getItem("upload_goods_image");
            //选择成功
            $("#heisebg").removeClass("heisebg").addClass("heisebghid");
            $("#waitingupload").removeClass("heisebghid").addClass("heisebg");
    
            //https://github.com/think2011/localResizeIMG3
            // 压缩图片
            lrz(path, {
                width: 500,
                quality: 0.7,
                done: function (results) { 
                    $.ajax({
                        type: "POST",
                        url: configManager.RequstUrl + "api/common/base64upload",
                        async: true,
                        data: { base64: results.base64, size: results.base64.length, dir: "goods" }
                    }).done(function (data) { 
                        if (data.state != "success") { console.log(data.message); return; }
                        var src = configManager.goodsImgurl.format(data.id, "") + '500-200';
                        if ("addspic" == type) {
                            var sImageStr = "<img width='98%' onclick='javascript:$(this).remove();' class='spic' title='{0}' src='{1}'>";
                            $("#addspic").before(sImageStr.format(data.id, src));
                        }
                        if ("addbpic" == type) {
                            var bImageStr = "<img width='98%' id='bpic' title='{0}' src='{1}'/>";
                            $("#addbpic").html(bImageStr.format(data.id, src));
                        }
                        $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
                        try { myScroll.refresh(); } catch (err) { }
                    }).fail(function () { 
                        plus.nativeUI.toast("上传失败！");
                        $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
                    });
                }
            });
        }

[https_github.com_think2011_localResizeIMG3]: https://github.com/think2011/localResizeIMG3