阅读 134
简单Image转化成Base64工具

简单Image转化成Base64工具

简单Image转化成Base64工具源码地址

废话不多说直接上代码。

工作中发现前人搞过,图片转化base64的HTML文件,但是没有预览,有的时候就不知道自己转化的那张图片所以自己就写了一个以后在工作中使用。

效果图

截屏2021-10-03 下午9.45.23.png

HTML

<!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>选择图片进行转化Base64</title>
    <script src="./imageToBase64.js"></script>
    <link rel="stylesheet" href="./imageToBase64.css">
</head>
<body>
    <div>选择图片进行转化Base64:</div>
    <!-- 当type 是file是就是选取文件 -->
    <div>
        <input id="clickFile" type="file" onchange="preImageFile()">
    </div>
    <div>
        <img id="img" src=""  height="300" alt="图片展示预览区域">
    </div>
    <div>转换结果请看控制台</div>


</body>
</html>
复制代码

FileReader知识点地址

JS

function preImageFile() {
    const preImage = document.getElementById("img");  
    const file = document.getElementById("clickFile").files[0];
    //允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容
    const reader = new FileReader();
    //判断文件是否选中
    if(file){
        //开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
        reader.readAsDataURL(file);
        //处理load (en-US)事件。该事件在读取操作完成时触发。
        reader.onloadend =  () =>
        {
            //预览的图篇显示图片
            preImage.src = reader.result;
            //控制台输出结果    
            console.log(reader.result);  
        }
    }
    else{
        preImage.src = "";
    }                
}
复制代码

CSS

div {
    margin: 20px 20px;
}
复制代码
文章分类
前端
文章标签