JS把base64压缩后处理为base64

发布时间 2023-12-11 16:21:58作者: zzgreg

重点参考了这篇文章:前端JS利用canvas的drawImage()对图片进行压缩  : https://www.cnblogs.com/goloving/p/8260206.html

其实是AI ChatGPT帮忙整理的,我用过觉得好,现在记录下来:

//把base64压缩后处理为base64
        function compressBase64Image(base64Data, maxWidth, maxHeight, callback) {
            var img = new Image();
            img.onload = function() {
                var originWidth = this.width;
                var originHeight = this.height;

                var targetWidth = originWidth;
                var targetHeight = originHeight;

                if (originWidth > maxWidth || originHeight > maxHeight) {
                    if (originWidth / originHeight > maxWidth / maxHeight) {
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }

                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                context.clearRect(0, 0, targetWidth, targetHeight);
                context.drawImage(img, 0, 0, targetWidth, targetHeight);

                var compressedBase64Data = canvas.toDataURL('image/jpeg'); //返回结果BASE64
                callback(compressedBase64Data); //接下来要进行的数据处理
            };

            img.src = base64Data;
        }

 

 使用方法,以下是示例:

            var reader = new FileReader();
                    reader.readAsDataURL(file); //把上传的file转BASE64
                    console.log();
                    reader.onload = function(e) {
                        //方法:上传压缩图片
                        var base64Data = e.target.result;
                        compressBase64Image(base64Data, 1000, 1000, function(compressedBase64Data) {
                            // 在这里处理压缩后的 base64 图像数据
                            //console.log(compressedBase64Data);
                            array.push(compressedBase64Data);
                            // 如果所有图片都被处理完毕,上传到Redis
                            if (array.length === filesLen) {
                                //图片ajax上传
                                postMultiToRedis(array);
                            } 
                        });