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

最新推荐文章于 2024-05-20 22:28:51 发布

落花流雨

最新推荐文章于 2024-05-20 22:28:51 发布

阅读量1.5k

点赞数 2

分类专栏： # 常用js方法文章标签： javascript

原文链接：https://www.cnblogs.com/mlw1814011067/p/13617411.html

版权

常用js方法专栏收录该内容

18 篇文章 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

<script>

    function getBase64Image(img) {
        var canvas = document.createElement("canvas"); // 创建canvas标签
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
        console.log('ext', ext);  // jpg
        var dataURL = canvas.toDataURL("image/" + ext);
        return dataURL;
    }

	// sourceImgUrl 就是你的图片路径 
    var sourceImgUrl = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3285976294,962780269&fm=26&gp=0.jpg";
    var image = new Image();
    image.setAttribute("crossOrigin", 'Anonymous');  // 图片跨域处理
    image.src = sourceImgUrl;
    image.onload = function () {
        var base64 = getBase64Image(image);
        console.log(base64);
    }

</script>

js将base64转化为图片格式

<body>
    <img alt="" id="img">
</body>

<script>
    var base64Img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAF50lEQVR4nO1aTUhUURQ+/qVZiopUloRaKP60KBMRUwhCMUEho6AWujJauFApN4FtgrACF4G4aKWgIm7EdGH+IIaDPwtNCxKS/gzUzH8T09M5F0acmaczb94dr9T74C3y3vfuud8995zvnMkLCfAfw1u1AaphEqDaANUwCVBtgGqYBKg2QDVMAlQboBomAaoNUA2TANUGqIZJgGoDVMP3oBZaXFyEz58/w8zMDKysrMD29jYcPXoUwsLC4MyZMxAREQE+Pj4HZc4OPEoA91p6e3uhrq4ORkZGBAm/f/+Gzc1NMc4bPnLkCBw7dgxiYmIgJycH7ty5A+Hh4Z40y8FI6VhdXcXXr1/j5cuXuduk6wkKCsLKykokb8GtrS1PmGcD6QQMDg4inSLSqerevPXx8vLCuLg4fP78Of78+VO2iTaQSkBHRwfGx8eLDbi7+d0PxQgsLi7GX79+yTTTBtII+PDhA54/f17Kxu29gUlYX1+XZaoNpBDw7ds3zfvu7e2N+fn5+ODBA8zMzNxzk/7+/njr1i18+PAhpqena5JQWlqKFEBlmGsDwwRQOsN79+5puv2NGzfEHaaoj9PT05iUlKRJQEFBgXBznvf+/XtMSEhwmBMaGiqumGwYFkLDw8NAEV+kPHtkZ2eLPO/r6yvy/NWrVzW/wfNCQkLEvLNnzwIR4DBnYWEBGhsbhYaQCUME8Ka7u7uFuNFCW1ubyP2Mr1+/Qk9Pj+a89vb2nXlfvnyB8fFxzbW6urrg+/fvRkx2gCEhxKLm3bt3O8LGHuSy4nTJ9WFoaEhzYwwmgK4LREdHQ39/P0xOToq/s1JMS0sT7584cQJIFwBdNSMmO8ALtXzXRbBbUpCDvr4+aQbxpnnDRUVFcP36dbEGk0exAebm5gQBJ0+ehIsXL0JKSopQjcHBwW7LaEMewCci607yxnhT9+/fh1OnTomrxV7BG9/Y2NB8JzAwULzDEvrmzZtA4kn/wkYiKEf41NRUKbmeNoFjY2P4+PFjpOII6URdfpfT6Llz57C2tla3fDZEwNLSEubm5homgNOexWIRadPId5gIJpC88mAI4LxdXl4uBI+7RkdGRiJVjHj37l308/MzTCZdC6yoqMA/f/54ngBGS0sLUq53y1gmjt325cuX4vTsxym4YWxsLJI+0Hw/KioKExMTHf4eEBAgvnsgBFD+xoyMDLcIYPlMEV6UwPZjJJyQcv6Ol9mPc8wg/YFra2tIGcNhnOMIaQqn9htWgpyCqqqqRJ7WAzp9oQybmppgeXnZYfzSpUtw+vRpoQ6vXbvmME4nL9QjnbZIm3R9bMZnZ2ehtbVVU6HawKgHMLgeaG5u1tUD4FK3pqZmz6bJ8ePHsaGhAUk8idO2H2fXJ2WIo6OjexZQhYWFSOTua7u0cphd9cmTJ+LeukIAnZ64p5y+XCVN78NX88ePH/vaLa0rzK5aVlYG1dXVQJtyOp+VG4sfitayTHAAxQen35faFuf7SG4HJSUlTuey9zFpHAs8BZbVziSy9NV5Q1y1WcFdX6rlBTm7CxkuoHiM7rpsEwR4LUqTTr8vvS3Ovf/Ozk6gvC4quYKCArhw4QJMTU3Bp0+fgO4kkIIUvwtwUZOZmSkqStlgcq9cueKcYFlB0Ipnz55hTEwM1tfXiy7QbrBO55Y5VXiijuAW18TExJ5Cx8jDNrCOcAbpBHBqoupN1zvc73O1+HHl4RTLadkVeOSHEb0g0YJZWVmGagrrw73DFy9euLz2oSCAwYInOTnZ0Oa5Bnj69KmQx67i0BDA4LiQl5cnFKU7P66QBhGqVA8OFQEMDoxUH+Dt27eR6ot9ieC4wadu/Xd7e7vu9Qz1BD0J7gVSFgGLxQJv376Fjx8/wvz8vGiDcX7nVhinWc73jx49goGBAdFHfPXqla51Di0BesCSl+oKaGlpgTdv3gjR5Sr+CQKs4BKYhQ9LYFfxTxHgDv77/yNkEqDaANUwCVBtgGqYBKg2QDVMAlQboBomAaoNUA2TANUGqMZfCF+ZQtnkKWcAAAAASUVORK5CYII='
    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>

落花流雨

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
文件或者图片与 base64 之间的转换

1. 字符串与base64互转 // var base64 = window.btoa(window.encodeURIComponent(str)) // 简写：字符串转base64 var str = '读取文件' //字符串转base64 function encode(str) { // 对字符串进行编码 var encode = encodeURI(str); // 对编码的字符串转化base64 v
复制链接

扫一扫