J'ai une communication webSocket, je reçois une chaîne encodée en base64, je la convertis en uint8 et je travaille dessus, mais maintenant je dois renvoyer, j'ai le tableau uint8 et je dois le convertir en chaîne base64, afin que je puisse l'envoyer. Comment puis-je effectuer cette conversion?
Réponses:
Toutes les solutions déjà proposées présentent de graves problèmes. Certaines solutions ne fonctionnent pas sur de grands tableaux, certaines fournissent une sortie erronée, certaines lancent une erreur sur un appel btoa si une chaîne intermédiaire contient des caractères multi-octets, certaines consomment plus de mémoire que nécessaire.
J'ai donc implémenté une fonction de conversion directe qui fonctionne juste indépendamment de l'entrée. Il convertit environ 5 millions d'octets par seconde sur ma machine.
https://gist.github.com/enepomnyaschih/72c423f727d395eeaa09697058238727
"ABCDEFG..."?
Si vos données peuvent contenir des séquences multi-octets (pas une séquence ASCII simple) et que votre navigateur a TextDecoder , vous devez l'utiliser pour décoder vos données (spécifiez l'encodage requis pour TextDecoder):
var u8 = new Uint8Array([65, 66, 67, 68]);
var decoder = new TextDecoder('utf8');
var b64encoded = btoa(decoder.decode(u8));
Si vous devez prendre en charge les navigateurs qui n'ont pas TextDecoder (actuellement juste IE et Edge), la meilleure option est d'utiliser un polyfill TextDecoder .
Si vos données contiennent de l'ASCII brut (pas Unicode / UTF-8 multi-octets), il existe une alternative simple d'utilisation String.fromCharCodequi devrait être prise en charge de manière assez universelle:
var ascii = new Uint8Array([65, 66, 67, 68]);
var b64encoded = btoa(String.fromCharCode.apply(null, ascii));
Et pour décoder la chaîne base64 en un Uint8Array:
var u8_2 = new Uint8Array(atob(b64encoded).split("").map(function(c) {
return c.charCodeAt(0); }));
Si vous avez des tampons de tableau très volumineux, l'application peut échouer et vous devrez peut-être segmenter le tampon (en fonction de celui publié par @RohitSengar). Encore une fois, notez que cela n'est correct que si votre tampon contient uniquement des caractères ASCII non multi-octets:
function Uint8ToString(u8a){
var CHUNK_SZ = 0x8000;
var c = [];
for (var i=0; i < u8a.length; i+=CHUNK_SZ) {
c.push(String.fromCharCode.apply(null, u8a.subarray(i, i+CHUNK_SZ)));
}
return c.join("");
}
// Usage
var u8 = new Uint8Array([65, 66, 67, 68]);
var b64encoded = btoa(Uint8ToString(u8));
btoa(String.fromCharCode.apply(null, myArray))
Uint8Array. TextDecoderest absolument la mauvaise chose à utiliser ici, car si votre Uint8Arraya octets dans la plage 128..255, le décodeur de texte les convertira par erreur en caractères unicode, ce qui cassera le convertisseur base64.
Solution très simple et test pour JavaScript!
ToBase64 = function (u8) {
return btoa(String.fromCharCode.apply(null, u8));
}
FromBase64 = function (str) {
return atob(str).split('').map(function (c) { return c.charCodeAt(0); });
}
var u8 = new Uint8Array(256);
for (var i = 0; i < 256; i++)
u8[i] = i;
var b64 = ToBase64(u8);
console.debug(b64);
console.debug(FromBase64(b64));
RangeError: Maximum call stack size exceeded
function Uint8ToBase64(u8Arr){
var CHUNK_SIZE = 0x8000; //arbitrary number
var index = 0;
var length = u8Arr.length;
var result = '';
var slice;
while (index < length) {
slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
result += String.fromCharCode.apply(null, slice);
index += CHUNK_SIZE;
}
return btoa(result);
}
Vous pouvez utiliser cette fonction si vous avez un très grand Uint8Array. Ceci est pour Javascript, peut être utile dans le cas de FileReader readAsArrayBuffer.
String.fromCharCode.apply()méthodes @Jens ne peuvent pas reproduire UTF-8: les caractères UTF-8 peuvent varier en longueur d'un octet à quatre octets, mais String.fromCharCode.apply()examine un UInt8Array dans des segments de UInt8, donc il suppose à tort que chaque caractère est exactement un octet de long et indépendant du voisin ceux. Si les caractères encodés dans l'entrée UInt8Array se trouvent tous dans la plage ASCII (à un octet), cela fonctionnera par hasard, mais il ne pourra pas reproduire l'UTF-8 complet. Vous avez besoin de TextDecoder ou d'un algorithme similaire pour cela.
Si vous utilisez Node.js, vous pouvez utiliser ce code pour convertir Uint8Array en base64
var b64 = Buffer.from(u8).toString('base64');
Voici une fonction JS à ceci:
Cette fonction est nécessaire car Chrome n'accepte pas encore une chaîne encodée en base64 comme valeur pour applicationServerKey dans pushManager.subscribe https://bugs.chromium.org/p/chromium/issues/detail?id=802280
function urlBase64ToUint8Array(base64String) {
var padding = '='.repeat((4 - base64String.length % 4) % 4);
var base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
var rawData = window.atob(base64);
var outputArray = new Uint8Array(rawData.length);
for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
Dans la solution ci-dessous, j'omets la conversion en chaîne. IDEA suit:
=ou ==au résultatLa solution ci-dessous fonctionne sur des blocs de 3 octets, elle convient donc aux grands tableaux. Une solution similaire pour convertir base64 en tableau binaire (sans atob) est ICI
Utilisez ce qui suit pour convertir le tableau uint8 en chaîne encodée en base64
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = [].slice.call(new Uint8Array(buffer));
bytes.forEach((b) => binary += String.fromCharCode(b));
return window.btoa(binary);
};
(Décodez une chaîne Base64 en Uint8Array ou ArrayBuffer avec prise en charge Unicode)
Une très bonne approche à ce sujet est présentée sur le site Web de Mozilla Developer Network :
function btoaUTF16 (sString) {
var aUTF16CodeUnits = new Uint16Array(sString.length);
Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = sString.charCodeAt(idx); });
return btoa(String.fromCharCode.apply(null, new Uint8Array(aUTF16CodeUnits.buffer)));
}
function atobUTF16 (sBase64) {
var sBinaryString = atob(sBase64), aBinaryView = new Uint8Array(sBinaryString.length);
Array.prototype.forEach.call(aBinaryView, function (el, idx, arr) { arr[idx] = sBinaryString.charCodeAt(idx); });
return String.fromCharCode.apply(null, new Uint16Array(aBinaryView.buffer));
}
var myString = "☸☹☺☻☼☾☿";
var sUTF16Base64 = btoaUTF16(myString);
console.log(sUTF16Base64); // Shows "OCY5JjomOyY8Jj4mPyY="
var sDecodedString = atobUTF16(sUTF16Base64);
console.log(sDecodedString); // Shows "☸☹☺☻☼☾☿"Si tout ce que vous voulez est une implémentation JS d'un encodeur base64, afin que vous puissiez renvoyer des données, vous pouvez essayer la btoafonction.
b64enc = btoa(uint);
Quelques notes rapides sur le btoa - ce n'est pas standard, donc les navigateurs ne sont pas obligés de le prendre en charge. Cependant, la plupart des navigateurs le font. Les gros, au moins. atobest la conversion opposée.
Si vous avez besoin d'une implémentation différente, ou si vous trouvez un cas de pointe où le navigateur n'a aucune idée de ce dont vous parlez, la recherche d'un encodeur base64 pour JS ne serait pas trop difficile.
Je pense qu'il y en a 3 qui traînent sur le site Web de mon entreprise, pour une raison quelconque ...
npm installer google-closing-library --save
require("google-closure-library");
goog.require('goog.crypt.base64');
var result =goog.crypt.base64.encodeByteArray(Uint8Array.of(1,83,27,99,102,66));
console.log(result);
$node index.jsécrirait AVMbY2Y = sur la console.
-veréponse votée soit acceptée plutôt qu'une réponse hautement +ve.