• 浏览器中的原生base64方法


    在web开发中,经常涉及到对文本、文件等进行base64编码处理,在之前的开发中,使用js-base64来进行处理,但其实浏览器已经原生包含了处理方法。性能更好,兼容性也更高。

    atob() - ASCII to Binary

    base64编码的ASCII字符串转为二进制字符串
    语法:

    // 浏览器上下文中
    var encodeData = window.btoa(someString)
    // js Worker 线程
    var encodeData = self.btoa(someString)
    

    示例:

    window.btoa('someString')
    // 返回 c29tZVN0cmluZw==
    

    btoa() - Binary to ASCII

    二进制数据字符串转为base64编码的ASCII字符串
    语法:

    // 浏览器上下文中
    var decodeData = window.atob(someString)
    // js Worker 线程
    var decodeData = self.atob(someString)
    

    示例:

    window.atob('c29tZVN0cmluZw==')
    // 返回 someString
    

    中文内容的处理

    如果直接编码中文,会出现报错

    window.btoa('一些字符串')
    

    报错:
    因为很明显中文超出了Latin1的语言集范围

    Latin1是ISO-8859-1的别名,有些环境下写作Latin-1。ISO-8859-1编码是单字节编码,向下兼容ASCII,其编码范围是0x00-0xFF,0x00-0x7F之间完全和ASCII一致,0x80-0x9F之间是控制字符,0xA0-0xFF之间是文字符号。

    中文内容的二次编码

    btoa(encodeURIComponent('一些字符串'))
    // 返回 JUU0JUI4JTgwJUU0JUJBJTlCJUU1JUFEJTk3JUU3JUFDJUE2JUU0JUI4JUIy
    decodeURIComponent(atob('JUU0JUI4JTgwJUU0JUJBJTlCJUU1JUFEJTk3JUU3JUFDJUE2JUU0JUI4JUIy'))
    // 返回 一些字符串
    

    中文内容的三次编码

    二次编码的问题是字母全部为大写,且转换后字符串长度比较长,这个问题通过使用escape三次编码可以解决,长度更短更美观

    btoa(unescape(encodeURIComponent('一些字符串')))
    // 返回 5LiA5Lqb5a2X56ym5Liy
    decodeURIComponent(escape(atob('5LiA5Lqb5a2X56ym5Liy')))
    // 返回 一些字符串
    

    兼容性

    文件的base64编码

    借助FileReader对象和readAsDataURL方法,我们可以把任意文件转为Base64 Data-URI。假设我们的文件对象是file,则转换的JavaScript代码如下:

    var reader = new FileReader();
    reader.onload = function(e) {
      // e.target.result就是该文件的完整Base64 Data-URI
    };
    reader.readAsDataURL(file);
    

    __EOF__

  • 本文作者: 学习中的Henin
  • 本文链接: https://www.cnblogs.com/chen-note/p/16472002.html
  • 关于博主: 评论和私信会在第一时间回复。或者直接私信我。
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
  • 声援博主: 如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。
  • 相关阅读:
    进程间的通信方式
    下一代智能合约编程语言Move(四)
    树上问题——树的直径
    WEBGPU学习之通过javascript代码修改顶点着色器的顶点数据。
    几个实用的MySQL内置函数使用方法
    VSCode配置用户代码片段+内置变量梳理
    low power-upf-vcsnlp(三)
    postman接收后端返回的文件流并自动下载
    Blazor前后端框架Known-V1.2.3
    一定能用到的简单但实用的五种按钮样式(HTML+CSS步骤详解,含详细注释)
  • 原文地址:https://www.cnblogs.com/chen-note/p/16472002.html