如何在JavaScript中将字符串编码为Base64 ?

我有一个PHP脚本，可以将PNG图像编码为Base64字符串。

我想用JavaScript做同样的事情。我知道如何打开文件，但我不知道如何进行编码。我不习惯使用二进制数据。

当前回答

这是一个atob()和btoa() JavaScript内置函数的现场演示:

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea{
        width:30%;
        height:100px;
      }
    </style>
    <script>
      // encode string to base64
      function encode()
      {
        var txt = document.getElementById("txt1").value;
        var result = btoa(txt);
        document.getElementById("txt2").value = result;
      }
      // decode base64 back to original string
      function decode()
      {
        var txt = document.getElementById("txt3").value;
        var result = atob(txt);
        document.getElementById("txt4").value = result;
      }
    </script>
  </head>
  <body>
    <div>
      <textarea id="txt1">Some text to decode
      </textarea>
    </div>
    <div>
      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>
    </div>
    <div>
      <textarea id="txt2">
      </textarea>
    </div>
    <br/>
    <div>
      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==
      </textarea>
    </div>
    <div>
      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>
    </div>
    <div>
      <textarea id="txt4">
      </textarea>
    </div>
  </body>
</html>

2019-02-09 10:20:14

其他回答

如果你想简单快速地编码base 64，而不考虑可能的兼容性问题，你可以使用turbocommons库。只需下载压缩后的js文件并编写以下代码:

<script src="../yourpathtothelibrary/turbocommons-es5.js"></script>

<script>
    var ConversionUtils = org_turbocommons.ConversionUtils;

    ConversionUtils.stringToBase64('hello');
</script>

你可以在这里查看库是如何完成的代码:

https://github.com/edertone/TurboCommons/blob/master/TurboCommons-TS/src/main/ts/utils/ConversionUtils.ts

更多信息:

https://turboframework.org/en/blog/2022-10-26/encode-decode-base64-strings-javascript-typescript-php

你可以在这里在线测试:

https://turboframework.org/en/app/stringutils/base64-encode

2022-10-25 20:04:50

从下面的评论(由SET和Stefan Steiger)接受的答案，这里是一个快速总结如何编码/解码一个字符串到Base64，而不需要一个库。

str = "The quick brown fox jumps over the lazy dog";
b64 = btoa(unescape(encodeURIComponent(str)));
str = decodeURIComponent(escape(window.atob(b64)));

纯JavaScript演示

jQuery演示(使用jQuery库进行显示，但不用于编码/解码)

str = "The quick brown fox jumps over the lazy dog"; $('input').val(str); $('#btnConv').click(function(){ var txt = $('input').val(); var b64 = btoa(unescape(encodeURIComponent(txt))); $('input').val(b64); $('#btnDeConv').show(); }); $('#btnDeConv').click(function(){ var b64 = $('input').val(); var txt = decodeURIComponent(escape(window.atob(b64))); $('input').val(txt); }); #btnDeConv{display:none;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" /> <button id="btnConv">Convert</button> <button id="btnDeConv">DeConvert</button>

还看到:

Base64 - MDN Web文档在JavaScript中判断一个字符串是否在Base64中

2017-08-23 16:24:54

我已经手工重写了这些编码和解码方法，除了十六进制的编码方法外，它们都是模块化格式的，以便跨平台/浏览器兼容，并且还具有真正的私有作用域，如果它们由于速度而存在，则使用btoa和atob，而不是利用自己的编码:

https://gist.github.com/Nijikokun/5192472

用法:

base64.encode(/* String */);
base64.decode(/* String */);

utf8.encode(/* String */);
utf8.decode(/* String */);

2013-03-19 00:56:06

这里的所有解决方案在某些情况下似乎都失败了，而且理解起来相当复杂。特别是对于非拉丁语言，如阿拉伯语

这里有一个解码UTF-16的简短解决方案

//decodes utf-16 characters such as ARABIC, URDU,PASHTO text
function decodeBase64(s) {
    var percentEncodedStr = atob(s).split('').map(function (c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join('');
    return decodeURIComponent(percentEncodedStr);
}

2022-01-28 12:16:27

如果你需要编码一个HTML图像对象，你可以写一个简单的函数，像这样:

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  // escape data:image prefix
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  // or just return dataURL
  // return dataURL
}

通过id获取图像的Base64编码:

function getBase64ImageById(id){
  return getBase64Image(document.getElementById(id));
}

还有更多。

2013-01-12 22:28:45

如何在JavaScript中将字符串编码为Base64 ?

推荐文章

最新文章

标签