文件或者图片与 base64 之间的转换

╰半夏微凉° 2023-01-01 04:48 171阅读 0赞

## 1. 字符串与base64互转 ##

// var base64 = window.btoa(window.encodeURIComponent(str)) // 简写：字符串转base64
    
        var str = '读取文件'
    
        //字符串转base64
        function encode(str) { 
            // 对字符串进行编码
            var encode = encodeURI(str);
            // 对编码的字符串转化base64
            var base64 = btoa(encode);
            return base64;
        }
        var base64 = encode(str)
        console.log('格式', base64); // JUU4JUFGJUJCJUU1JThGJTk2JUU2JTk2JTg3JUU0JUJCJUI2
    
    ******************************************************************************************
        // base64转字符串
        function decode(base64) { 
            // 对base64转编码
            var decode = atob(base64);
            // 编码转字符串
            var str = decodeURI(decode);
            return str;
        }
    
        var string = decode(base64)
        console.log(string); // 读取文件

## 2. base64与图片互转 ##

> 原文链接：https://www.jianshu.com/p/90fc1f9042a8

### js将图片转化为base64 ###

### js将base64转化为图片格式 ###

<body>
        <img alt="" id="img">
    </body>
    
    <script> var base64Img = 'data:image/png;base64,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' document.getElementById('img').setAttribute('src', base64Img) </script>

## 3. 文件转base64的方法 ##

### 3.1 拖拽文件 ###

任意文件转base64-直接拖进来

> 原文链接：https://www.zhangxinxu.com/sp/base64.html

<!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="description" content="在线Base64生成转换小工具，可以实现任意文件转Base64 Data-URI编码，文件往页面中一拖即可。" />
        <meta name="keywords" content="base64, FileReader, readAsDataURL, 文件" />
        <meta name="author" content="谢勇彬，XYB" />
        <title>任意文件转base64-直接拖进来</title>
        <style>
            body { 
                word-break: break-all;
                margin: 0 1em;
                min-height: 100vh;
                font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
                overflow: hidden;
            }
    
            .empty::before { 
                position: absolute;
                font-size: 50px;
                content: '任意文件\A拖到这里';
                white-space: pre;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: gray;
            }
        </style>
    </head>
    
    <body class="empty">
        <script>
            window.addEventListener("dragenter", function (event) {  event.preventDefault(); }, false);
            window.addEventListener("dragover", function (event) {  event.preventDefault(); }, false);
    
            window.addEventListener("drop", function (event) { 
                var reader = new FileReader();
                reader.onload = function (e) { 
                    document.body.insertAdjacentHTML("afterBegin", '<p>' + e.target.result + '</p>');
                    document.body.classList.remove('empty');
                };
                reader.readAsDataURL(event.dataTransfer.files[0]);
                event.preventDefault();
            }, false);
        </script>

### 3.2 选择文件 或者 图片 ###

> 原文链接：https://www.cnblogs.com/webuserlast/p/4842498.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>简单的html5 File测试 for pic2base64</title>
        <style> </style>
        <script> window.onload = function () { var input = document.getElementById("fielinput"); var txshow = document.getElementById("txshow"); if (typeof (FileReader) === 'undefined') { result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！"; input.setAttribute('disabled', 'disabled'); } else { input.addEventListener('change', readFile, false); txshow.onclick = function () { input.click(); } } } function readFile() { var file = this.files[0]; //判断是否是图片类型 /*if (!/image\/\w+/.test(file.type)) { alert("只能选择图片"); return false; }*/ var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { txshow.src = this.result; document.getElementById("data").innerText = this.result.substring(this.result.indexOf(',') + 1); } } </script>
    </head>
    
    <body>
        <input type="file" id="fielinput" />
        <img id="txshow" style="width:100px;height:100px;" />
        <br />解析之后的base64数据：<br />
        <p id="data"></p>
    </body>
    
    </html>