图片上传 base64数据压缩、降低清晰度方法封装

最新推荐文章于 2025-11-18 09:19:37 发布

原创最新推荐文章于 2025-11-18 09:19:37 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #上传 #base64

javascript+jquery 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种将图片转换为Base64编码的方法，通过使用JavaScript创建一个函数getBase64Image，该函数可以接收一个图片元素作为参数，然后在canvas上绘制并将其转换为压缩后的Base64编码字符串。

函数简单封装：

 function getBase64Image(img) {

            var canvas = document.createElement("canvas");

            var width = img.width;

            var height = img.height;

            // calculate the width and height, constraining the proportions

            if (width > height) {

                if (width > 100) {

                    height = Math.round(height *= 100 / width);

                    width = 100;

                }

            } else {

                if (height > 100) {

                    width = Math.round(width *= 100 / height);

                    height = 100;

                }

            }

            canvas.width = width;  /*设置新的图片的宽度*/

            canvas.height = height; /*设置新的图片的长度*/

            var ctx = canvas.getContext("2d");//开启canvas绘图

            ctx.drawImage(img, 0, 0, width, height); /*绘图*/

            var dataURL = canvas.toDataURL("image/png", 0.8);//降低图片的清晰度

            return dataURL.replace("data:image/png;base64,", "");//返回除去data:image/png;base64,的base64数据

        }