图片base64格式压缩

网上一通百度找了几个小时，总算是搞出来了，话不多说，直接上代码

//第一个参数就是原来的字符串，第二个是宽度，第三个就是回调方法
function cutImageBase64(base64, w, callback) {
            var newImage = new Image();
            var quality = 0.6;    //压缩系数0-1之间
            newImage.src = base64;
            newImage.setAttribute("crossOrigin", 'Anonymous');  //url为外域时需要
            var imgWidth, imgHeight;
            newImage.onload = function () {
                imgWidth = this.width;
                imgHeight = this.height;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                if (Math.max(imgWidth, imgHeight) > w) {
                    if (imgWidth > imgHeight) {
                        canvas.width = w;
                        canvas.height = w * imgHeight / imgWidth;
                    } else {
                        canvas.height = w;
                        canvas.width = w * imgWidth / imgHeight;
                    }
                } else {
                    canvas.width = imgWidth;
                    canvas.height = imgHeight;
                    quality = 0.6;
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
                // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
                while (base64.length / 1024 > 150) {
                    quality -= 0.01;
                    base64 = canvas.toDataURL("image/jpeg", quality);
                }
                // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
                while (base64.length / 1024 < 50) {
                    quality += 0.001;
                    base64 = canvas.toDataURL("image/jpeg", quality);
                }
                callback(base64);//必须通过回调函数返回，否则无法及时拿到该值
            }
        }

使用
html代码

<div id="preview">
            <input type="file"  id="file" value="" onchange="imgss(event)" />
            <img id="imgs" />
</div>

function imgss(e){
            let imgs=document.getElementById("imgs");
            var file = e.target.files[0];                
                // 确认选择的文件是图片                
                if(file.type.indexOf("image") == 0) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);                    
                    reader.onload = function(e) {
                        // 图片base64化
                  var newUrl = this.result;
                        
                        //这是原来的base64格式字符串
            var base64= newUrl;
                        
            //调用方法
            cutImageBase64(base64, 500, Imgbas);
                         
            //在这里根据回调回来的数据打印
            function Imgbas(base64) {
                console.log(base64);
            }

         };
      }
 }

这样就可以了

图片base64格式 压缩

推荐阅读更多精彩内容

图片base64格式压缩