Base64的学习

2023-05-16

来源

再一次看比如的代码的时候发现别人的图标是一串很长的字符串，而不是路径引用，从而开启了我对Base64的学习

解决

原生的atob和btoa方法进行Base64的编码

atob：解码 从a(base64) 到 b(lob) 的写法

btoa：编码 从 b(lob) 到 a(base64) 的写法

问题

那么我们如何再页面中使用Base64转义过的SVN图片呢？

1.直接用在线转换网站转换SVN代码

background: url('data:image/svg+xml;base64,PHN2ZyB0PSIxNTY3NjAwNTY3MzYzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM4MTEiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMjc2IDE5OS4yaDM5MS44YzE0LjQgMCAyNi4xIDExLjcgMjYuMSAyNi4xdjU2MS42aC00NDRWMjI1LjNjLTAuMS0xNC40IDExLjYtMjYuMSAyNi4xLTI2LjF6IiBmaWxsPSIjRkZGRkZGIiBwLWlkPSIzODEyIi8+PHBhdGggZD0iTTcyMCA4MTNIMjIzLjdWMjI1LjNjMC0yOC44IDIzLjQtNTIuMiA1Mi4yLTUyLjJoMzkxLjljMjguOCAwIDUyLjIgMjMuNCA1Mi4yIDUyLjJWODEzeiBtLTQ0NC01Mi4yaDM5MS44VjIyNS4zSDI3NnY1MzUuNXoiIGZpbGw9IiMyRjJGMzMiIHAtaWQ9IjM4MTMiLz48cGF0aCBkPSJNMjEwLjcgNzYwLjhoNTIyLjRjMTQuNCAwIDI2LjEgMTEuNyAyNi4xIDI2LjEgMCAxNC40LTExLjcgMjYuMS0yNi4xIDI2LjFIMjEwLjdjLTE0LjQgMC0yNi4xLTExLjctMjYuMS0yNi4xLTAuMS0xNC40IDExLjYtMjYuMSAyNi4xLTI2LjF6IiBmaWxsPSIjMkYyRjMzIiBwLWlkPSIzODE0Ii8+PHBhdGggZD0iTTM1NC4zIDMwMy43aDIzNS4xYzE0LjQgMCAyNi4xIDExLjcgMjYuMSAyNi4xdjkxLjRjMCAxNC40LTExLjcgMjYuMS0yNi4xIDI2LjFIMzU0LjNjLTE0LjQgMC0yNi4xLTExLjctMjYuMS0yNi4xdi05MS40YzAtMTQuNCAxMS43LTI2LjEgMjYuMS0yNi4xeiIgZmlsbD0iIzhDQUFGRiIgcC1pZD0iMzgxNSIvPjxwYXRoIGQ9Ik01ODkuNCA0NzMuNUgzNTQuM2MtMjguOCAwLTUyLjItMjMuNC01Mi4yLTUyLjJ2LTkxLjRjMC0yOC44IDIzLjQtNTIuMiA1Mi4yLTUyLjJoMjM1LjFjMjguOCAwIDUyLjIgMjMuNCA1Mi4yIDUyLjJ2OTEuNGMwIDI4LjgtMjMuNCA1Mi4yLTUyLjIgNTIuMnpNMzU0LjMgMzI5Ljh2OTEuNGgyMzUuMXYtOTEuNEgzNTQuM3oiIGZpbGw9IiMyRjJGMzMiIHAtaWQ9IjM4MTYiLz48cGF0aCBkPSJNNzg1LjMgMzQyLjloNTIuMmMxNC40IDAgMjYuMSAxMS43IDI2LjEgMjYuMXYxMDQuNWMwIDE0LjQtMTEuNyAyNi4xLTI2LjEgMjYuMWgtNTIuMmMtMTQuNCAwLTI2LjEtMTEuNy0yNi4xLTI2LjFWMzY5YzAtMTQuNCAxMS43LTI2LjEgMjYuMS0yNi4xeiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iMzgxNyIvPjxwYXRoIGQ9Ik04MzcuNSA1MjUuN2gtNTIuMmMtMjguOCAwLTUyLjItMjMuNC01Mi4yLTUyLjJWMzY5YzAtMjguOCAyMy40LTUyLjIgNTIuMi01Mi4yaDUyLjJjMjguOCAwIDUyLjIgMjMuNCA1Mi4yIDUyLjJ2MTA0LjVjMC4xIDI4LjgtMjMuMyA1Mi4yLTUyLjIgNTIuMnpNNzg1LjMgMzY5djEwNC41aDUyLjJWMzY5aC01Mi4yeiIgZmlsbD0iIzJGMkYzMyIgcC1pZD0iMzgxOCIvPjxwYXRoIGQ9Ik03ODYuNSA3NDEuMWgtNzcuNnYtNTIuMmg3Ny42VjQ5Ny42aDUyLjJ2MTkxLjJjMCAyOC45LTIzLjQgNTIuMy01Mi4yIDUyLjN6IiBmaWxsPSIjMkYyRjMzIiBwLWlkPSIzODE5Ii8+PC9zdmc+')

2.通过btoa函数转换的SVN代码前加'data:image/svg+xml;base64'

3.通过JS赋值

bb为通过btoa加编码的SVN图片
 // /*三：通过JS赋值*/
 document.querySelector('.box').style.backgroundImage = `url(data:image/svg+xml;base64,${bb})`

解决base64 中文的bug

btoa 不可以直接将中文转base64

先将中文编码(encodeURIComponent)后再base64，还原就是，再将base64还原再解码，就可以解决base64不可以编码中文的bug

console.log(window.btoa(window.encodeURIComponent('嘻嘻哈哈哈哈啦啦啦啦')))
console.log(window.decodeURIComponent(window.atob('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2')))

css中内联SVG图片有比转Base64更好的方法

SVG直接内联

方法就是把SVG代码直接内联在CSS的url()方法中，语法就是data: image / svg + xml; utf8, 加上完整的SVG代码即可！例如比较常用的background - image的url()方法

好处：比如可以直接修改颜色再fill中修改；兼容性提高了

.icon - arrow - down {
  width: 20px; height: 20px;
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#00A5E0" d="M145.659,68.949c-5.101-5.208-13.372-5.208-18.473,0L99.479,97.233 L71.772,68.949c-5.1-5.208-13.371-5.208-18.473,0c-5.099,5.208-5.099,13.648,0,18.857l46.18,47.14l46.181-47.14 C150.759,82.598,150.759,74.157,145.659,68.949z"/></svg>') no - repeat center;
      background - size: 100 %;
    }

但是IE没用，和我们想中不一样，所以先进行URL编码，那么把这个放入background:url()中就是可以的

    encodeURIComponent('<svg version="1.1" ...</svg>')

这样就OK了但是转义可读性不强，因为都被URL编码

我们无需让所有的字符都encode也能让IE浏览器正确识别。根据前辈的实践，只需要对下面这些字符转义就能满足绝大多数的场景，它们是："，%，#，{，}，<，>

这样那么一些单词比如fill就看的到那么fill关于颜色的值我们就可以直接改了

压缩工具：旭哥的 https://www.zhangxinxu.com/sp/svgo/

任意文件转base64

FileReader :

对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据

FileReader.readAsDataURL():

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时readyState 中的 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容

    function previewFile() {
      var file = document.querySelector('input[type=file]').files[0];
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        console.log(reader.result) // 输出文件内容
      }, false);

      if (file) {
        reader.readAsDataURL(file);
      }
    }

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Base64