前端base64压缩图片

最新推荐文章于 2025-07-03 10:33:58 发布

原创

最新推荐文章于 2025-07-03 10:33:58 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何使用JavaScript在前端将图片转换为Base64编码，并进行压缩，以减少图片大小，提高网页加载速度。详细讲解了相关API的使用方法和压缩逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片压缩</title>
</head>
<body>
    <input id="upload" type='file'>
    <div id = 'yulan'></div>
    <script>
        const imgList = ['image/jpeg','image/png'];
        const MAXSIZE = 1024*1024;//设定上传图片大小
        const MAXSIZE_STR = '1MB';
        //上传图片转base64
        function imageToBase64(file,callback) {
            let reader = new FileReader()
            reader.addEventListener('load',function (e) {
               const bease64Image =  e.target.result;
               callback && callback(bease64Image)
               reader = null
            })
            reader.readAsDataURL(file)
        }
        //base64预览并压缩
        function compress(base64Image) {
            let ma