将图片转换为Base64编码的字符串

时间：2024-01-18 19:44:44

图片以文件的形式存在，可以在表单中使用。

也可以转换成Base64编码的字符串，从而在css、js中以字符串的形式使用图片。例如，在css中设置背景图片、在js中用ajax上传图片。

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

</head>

<body>

    <h2>图片转Base64</h2>

    <input type="file" id="uploadFile" onchange="getDataUrl(event);"/>

    <img id="myImg" width="16" height="16"/>

    <script>

        let getDataUrl = (e)=>{

            // 获取图片

            let file = document.getElementById('uploadFile').files[0];

            // 检测图片

            if(!/image\/w+/.test(file.type)){

                alert('请上传图片');

                return;

            }

            // 转换图片

            let fileReader = new FileReader();

            fileReader.onload = ()=>{

                console.log(fileReader.result);

                document.querySelector('#myImg').src = fileReader.result;

            }

            fileReader.readAsDataURL();

        }

    </script>

</body>

</html>

各种图片在线转换Base64的网站，就是使用这种方法来转换jpg、png、ico等图片。

将图片转换为Base64编码的字符串

相关文章