layui压缩图片上传

 

<script>
    $(function () {
        //上传图片
        var index;
        $(".dade_img").click(function () {
            $("#file").click();
        })
        layui.use(['upload', 'element', 'layer'], function() {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;
            var name = window.localStorage.getItem("name");
            var idid = window.localStorage.getItem('idid');
            upload.render({
                elem: '#file'
                ,url: 'img'+"?name="+name+"&idid="+idid
                ,auto: false
                ,choose: function (obj) { //选择文件后的回调
                    var files = obj.pushFile();
                    var filesArry = [];
                    for (var key in files) { //将上传的文件转为数组形式
                        filesArry.push(files[key])
                    }
                    var index = filesArry.length - 1;
                    var file = filesArry[index]; //获取最后选择的图片,即处理多选情况
                    if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                        .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
                        return obj.upload(index, file)
                    }
                    canvasDataURL(file, function (blob) {
                        var aafile = new File([blob], file.name, {
                            type: file.type
                        })
                        var isLt1M;
                        if (file.size < aafile.size) {
                            isLt1M = file.size
                        } else {
                            isLt1M = aafile.size
                        }

                        if (isLt1M / 1024 / 1024 > 2) {
                            return layer.alert('上传图片过大！')
                        } else {
                            if (file.size < aafile.size) {
                                return obj.upload(index, file)
                            }
                            obj.upload(index, aafile)
                        }
                    })
                }
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    var img = "/storage/"+res[0];
                    $("#imgpost").attr("src",img);
                    $("#imgpost").attr("style","");
                    $("#fileimg").val(img);
                },
                progress: function(n, elem, e){
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
            function canvasDataURL(file, callback) { //压缩转化为base64
                var reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = function (e) {
                    const img = new Image()
                    const quality = 0.8 // 图像质量
                    const canvas = document.createElement('canvas')
                    const drawer = canvas.getContext('2d')
                    img.src = this.result
                    img.onload = function () {
                        canvas.width = img.width
                        canvas.height = img.height
                        drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
                        convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
                    }
                }
            }

            function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式
                const arr = urlData.split(',')
                const mime = arr[0].match(/:(.*?);/)[1]
                const bstr = atob(arr[1])
                let n = bstr.length
                const u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                callback(new Blob([u8arr], {
                    type: mime
                }));
            }

        })
    })
</script>