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

IT技术 javascript html base64
2021-02-03 17:43:55

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 字符串。

6个回答

为了防止 'InvalidCharacterError' 错误，你需要这样做： 

var base64EncodedStr = btoa(unescape(encodeURIComponent(rawData)));
已弃用的 unescape() 方法计算一个新字符串，其中十六进制转义序列被替换为它所代表的字符。转义序列可能由像转义这样的函数引入。因为 unescape() 已被弃用，请改用 decodeURI() 或 decodeURIComponent。
2021-03-23 17:43:55
在我的情况下，问题是unescape由于某种原因导致图像无效（不呈现）并且移动到decodeURI可能是正确的移动，因为这让我回到了问题btoa()，这导致了不可避免的错误：“失败在 'Window' 上执行 'btoa'：要编码的字符串包含超出 Latin1 范围的字符。”
2021-03-28 17:43:55
由于这个问题不是专门关于图像的，我在这里解决了我的解决方案（它依赖于String.fromCharCode修复btoa()错误）：stackoverflow.com/a/66823987/899075
2021-04-08 17:43:55
使用 decodeURI 和 decodeURIComponent 都会导致“错误：无法在 'Window' 上执行 'btoa'：要编码的字符串包含超出 Latin1 范围的字符”，所以我坚持使用 unsecape。
2021-04-09 17:43:55
使用decodeURI而不是unescape折旧：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
2021-04-12 17:43:55

使用FileReader将您的图像编码为数据 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]));
});
补充一点，e.target.result 中字符串的内容将以文件类型开头，例如，data:application/pdf;base64,然后是实际的base64 字符串。因此，如果您需要纯 base64，请用逗号分隔并取第二部分。
2021-03-29 17:43:55
效果很好！我将它与 结合使用req = new XMLHttpRequest()，我必须设置req.responseType = 'blob'以使其工作。blob 数据在req.response
2021-04-13 17:43:55

试试这个btoa功能：

   var data = btoa(r);
@Esailija 以及如何使用普通的 unicode 字符串？我的意思是我试图将它保存为 jpeg，但运气不佳:(
2021-03-17 17:43:55
@BastianVoigt 因为你有普通的 unicode 字符串而不是二进制字符串
2021-03-26 17:43:55
我的 Chrome 不同意。或者为什么它会向我显示此错误消息？是不是因为我的字符串以某种方式被解释为 UTF-8？
2021-03-28 17:43:55
似乎图像文件通常在二进制数据旁边包含 unicode 字符串。所以这个答案可能不适用于图像。
2021-03-30 17:43:55
不幸的是，这不适用于二进制数据：未捕获的 InvalidCharacterError：无法在 'Window' 上执行 'btoa'：要编码的字符串包含超出 Latin1 范围的字符。”
2021-04-08 17:43:55

这是一个老问题，但找不到更好的答案，所以我写下了这个函数。它会将 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;
}

//dataArr is a Uint8Array        
function toBase64(dataArr){
            return btoa(dataArr.reduce((data, val)=> {
                 return data + String.fromCharCode(val);
            }, ''));
        }
这似乎是一个很好的答案，简短而简洁，它解决了我的问题...无法在 'Window' 上执行 'btoa'：要编码的字符串包含超出 Latin1 范围的字符
2021-03-28 17:43:55
其它你可能感兴趣的问题
上一篇使用多个逗号分隔值的变量声明是什么意思（例如 var a = b,c,d;） 下一篇如何将原始 javascript 对象转换为 python 字典？