JavaScript 实现base64图片压缩

最新推荐文章于 2025-05-25 14:49:38 发布

wucong60

最新推荐文章于 2025-05-25 14:49:38 发布

阅读量1.5w

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/wucong60/article/details/82592635

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个实际案例展示了如何使用JavaScript进行图片压缩。从加载原始图片到压缩处理并展示压缩后的效果，详细介绍了整个过程的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看如下效果图，第一张是原图，点击Convert按钮后，第二张图显示压缩后的图，可以看到第一张的图的宽度是1600，压缩后图片的宽度是800

废话少说，直接上代码。

<textarea id="a">
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QB0RXhpZgAATU0AKgAAAAgABAEaAAUAAA//2wBDAQICAgQEBAcEBAcQCwkLEBAQEAUUUUAf//Z
</textarea>
<img id="imga" width="200" height="200" />
<HR>
<button type="button" onclick="convert()">convert</button>
<textarea id="b">
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QB0RX+tD0jMjqn0q5VR/v1mdBFRRRQAUUUUAf//Z
</textarea>
<img id="imgb" width="200" height="200" />
<HR>
<script>
    imga.src = a.innerHTML;
    imgb.src = b.innerHTML;

    function convert() {
        compress(a.innerHTML, 800, 0.5).then(function (val) {
            imgb.src = val;
        });
    }

    function compress(base64String, w, quality) {
        var getMimeType = function (urlData) {
            var arr = urlData.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            // return mime.replace("image/", "");
            return mime;
        };
        var newImage = new Image();
        var imgWidth, imgHeight;

        var promise = new Promise(resolve => newImage.onload = resolve);
        newImage.src = base64String;
        return promise.then(() => {
            imgWidth = newImage.width;
            imgHeight = newImage.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;
            }
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
            var base64 = canvas.toDataURL(getMimeType(base64String), quality);
            console.log(base64);
            return base64;
        });
    }
</script>