将图片转换为Base64编码的字符串
Posted 沙滩海风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将图片转换为Base64编码的字符串相关的知识，希望对你有一定的参考价值。
图片以文件的形式存在，可以在表单中使用。
也可以转换成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编码的字符串的主要内容，如果未能解决你的问题，请参考以下文章