使用javascript将二进制数据转换为base64

HTML5使您能够在本地存储数据，我认为这很好。例如，以下是如何使用它：

        var store = window.localStorage;
        store.setItem('foo', "hellow world");
        var test = store.getItem('foo');
        // test should = "hellow world"

在html中，您可以通过将图像源设置为以下方式动态显示图像：

     "data:image/jpg;base64," + (base64string)

所以我的问题是如何将二进制数据转换为base64字符串，以便利用html5本地存储

例如，如果我能：

$.ajax({
   url: 'someImage.png',
   type: 'POST',
   success: function (r) {

                // here I want to convert r to a base64 string !
                // r is not binary so maybe I have to use a different approach
                var data = ConvertToBase64(r);



                document.getElementById("img").src = "data:image/png;base64," + data;
            },
});

---

我知道我可以通过使用html5将图像包装在画布上，然后将其转换为base64string来解决这个问题。此外，我还可以在服务器上提供特定的服务，该服务将发送该图像的base64字符串数据（someImage.aspx）。我只想知道是否可以从服务器检索二进制数据并将其转换为base64字符串。尝试以下功能：

   var data = btoa(r);

---

使用文件阅读器将图像编码为数据URL：

jQuery.ajax({...})
.done(function (r) {
  var reader = new FileReader(
  reader.onload = (function(self) {
    return function(e) {
      document.getElementById("img").src = e.target.result;
    }
  })(this);
  reader.readAsDataURL(new Blob([r]));
});

---

要防止“InvalidCharacterError”错误，您需要执行以下操作：

var base64EncodedStr = btoa(unescape(encodeURIComponent(rawData)));

---

这是一个老问题，但找不到更好的答案，所以我写下了这个函数。它将Uint8Array直接转换为Base64，而不将其转换为Base64之前的字符串。希望它能帮助别人

var encoder = new TextEncoder("ascii");
var decoder = new TextDecoder("ascii");
var base64Table = encoder.encode('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=');
function toBase64(dataArr){
    var padding = dataArr.byteLength % 3;
    var len = dataArr.byteLength - padding;
    padding = padding > 0 ? (3 - padding) : 0;
    var outputLen = ((len/3) * 4) + (padding > 0 ? 4 : 0);
    var output = new Uint8Array(outputLen);
    var outputCtr = 0;
    for(var i=0; i<len; i+=3){              
        var buffer = ((dataArr[i] & 0xFF) << 16) | ((dataArr[i+1] & 0xFF) << 8) | (dataArr[i+2] & 0xFF);
        output[outputCtr++] = base64Table[buffer >> 18];
        output[outputCtr++] = base64Table[(buffer >> 12) & 0x3F];
        output[outputCtr++] = base64Table[(buffer >> 6) & 0x3F];
        output[outputCtr++] = base64Table[buffer & 0x3F];
    }
    if (padding == 1) {
        var buffer = ((dataArr[len] & 0xFF) << 8) | (dataArr[len+1] & 0xFF);
        output[outputCtr++] = base64Table[buffer >> 10];
        output[outputCtr++] = base64Table[(buffer >> 4) & 0x3F];
        output[outputCtr++] = base64Table[(buffer << 2) & 0x3F];
        output[outputCtr++] = base64Table[64];
    } else if (padding == 2) {
        var buffer = dataArr[len] & 0xFF;
        output[outputCtr++] = base64Table[buffer >> 2];
        output[outputCtr++] = base64Table[(buffer << 4) & 0x3F];
        output[outputCtr++] = base64Table[64];
        output[outputCtr++] = base64Table[64];
    }
    
    var ret = decoder.decode(output);
    output = null;
    dataArr = null;
    return ret;
}

var编码器=新的文本编码器（“ascii”）；
var解码器=新的文本解码器（“ascii”）；
var base64Table=encoder.encode（'abcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz012456789+/='）；
函数toBase64（数据阵列）{
var padding=dataArr.ByTeleLength%3；
var len=数据传输长度-填充；
填充=填充>0？（3-填充）：0；
var outputLen=（（len/3）*4）+（padding>0？4:0）；
var输出=新的UINT8阵列（outputLen）；
var outputCtr=0；
对于（变量i=0；i>12）&0x3F]；
输出[outputCtr++]=base64表[（缓冲区>>6）&0x3F]；
输出[outputCtr++]=base64Table[buffer&0x3F]；
}
if（padding==1）{
变量缓冲区=（（数据阵列[len]&0xFF）>10]；
输出[outputCtr++]=base64Table[（缓冲区>>4）&0x3F]；
输出[outputCtr++]=base64表[（缓冲区>2]；
output[outputCtr++]=base64Table[（缓冲区请参阅本文：不幸的是，这不适用于二进制数据：未捕获的InvalidCharacterError:未能在“窗口”上执行“btoa”：要编码的字符串包含拉丁1范围之外的字符。“我的Chrome不同意。或者为什么它会向我显示此错误消息？是因为我的字符串被某种方式解释为UTF-8吗？@BastianVoigt，因为您有普通的unicode字符串，而不是二进制字符串。”string@Esailija那么如何使用普通的unicode字符串呢？我的意思是我正试图将其保存为jpeg格式，但运气很差：（图像文件中似乎经常包含unicode字符串和二进制数据。因此，这个答案可能不适用于图像。不推荐使用的unescape（）方法计算一个新字符串，其中十六进制转义序列替换为它所表示的字符。转义序列可能由类似escape的函数引入。由于不推荐使用unescape（），请改用decodeURI（）或decodeURIComponent。使用decodeURI和decodeURIComponent会导致“错误：无法在“窗口”上执行'btoa'：要编码的字符串包含拉丁1范围以外的字符”，因此我坚持使用Unscape。请使用
decodeURI
而不是
unescape
，因为它被贬值了：在我的情况下，问题是
unescape
出于某种原因导致图像无效（无法呈现）移动到
decodeURI
可能是正确的移动，因为这让我又回到了
btoa（）
的问题，这导致了不可避免的错误：“无法在“窗口”上执行“btoa”：要编码的字符串包含拉丁1范围之外的字符。“因为这个问题不是专门针对图像的，所以我在这里介绍了我的解决方案（它依赖于
String.fromCharCode
来修复
btoa（）
错误）：效果很好！我将它与
req=new XMLHttpRequest（）结合使用。）
，我必须设置
req.responseType='blob'
使其工作。blob数据位于
req.response
中，只需添加，e.target.result中的字符串内容将以文件类型开始，例如
数据：application/pdf；base64，
然后是实际的base64字符串。因此，如果需要纯base64，请用逗号分割第二部分。
//dataArr is a Uint8Array        
function toBase64(dataArr){
            return btoa(dataArr.reduce((data, val)=> {
                 return data + String.fromCharCode(val);
            }, ''));
        }