Làm thế nào để chuyển đổi Mảng uint8 sang Chuỗi mã hóa base64?

Question 1

Tôi nhận được thông tin liên lạc webSocket, tôi nhận được chuỗi được mã hóa base64, chuyển đổi nó thành uint8 và làm việc trên đó, nhưng bây giờ tôi cần gửi lại, tôi nhận được mảng uint8 và cần chuyển nó thành chuỗi base64, vì vậy tôi có thể gửi nó. Làm thế nào tôi có thể thực hiện chuyển đổi này?

Question 2

Tất cả các giải pháp đã được đề xuất đều có vấn đề nghiêm trọng. Một số giải pháp không hoạt động trên các mảng lớn, một số cung cấp đầu ra sai, một số gây ra lỗi khi gọi btoa nếu một chuỗi trung gian chứa các ký tự multibyte, một số giải pháp sử dụng nhiều bộ nhớ hơn mức cần thiết.

Vì vậy, tôi đã triển khai một chức năng chuyển đổi trực tiếp hoạt động bất kể đầu vào. Nó chuyển đổi khoảng 5 triệu byte mỗi giây trên máy của tôi.

https://gist.github.com/enepomnyaschih/72c423f727d395eeaa09697058238727

Hiển thị đoạn mã

/*
MIT License
Copyright (c) 2020 Egor Nepomnyaschih
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/*
// This constant can also be computed with the following algorithm:
const base64abc = [],
	A = "A".charCodeAt(0),
	a = "a".charCodeAt(0),
	n = "0".charCodeAt(0);
for (let i = 0; i < 26; ++i) {
	base64abc.push(String.fromCharCode(A + i));
}
for (let i = 0; i < 26; ++i) {
	base64abc.push(String.fromCharCode(a + i));
}
for (let i = 0; i < 10; ++i) {
	base64abc.push(String.fromCharCode(n + i));
}
base64abc.push("+");
base64abc.push("/");
*/
const base64abc = [
	"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
	"N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
	"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
	"n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
	"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "/"
];

/*
// This constant can also be computed with the following algorithm:
const l = 256, base64codes = new Uint8Array(l);
for (let i = 0; i < l; ++i) {
	base64codes[i] = 255; // invalid character
}
base64abc.forEach((char, index) => {
	base64codes[char.charCodeAt(0)] = index;
});
base64codes["=".charCodeAt(0)] = 0; // ignored anyway, so we just need to prevent an error
*/
const base64codes = [
	255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
	255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
	255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 62, 255, 255, 255, 63,
	52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 255, 255, 255, 0, 255, 255,
	255, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
	15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 255, 255, 255, 255, 255,
	255, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
	41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
];

function getBase64Code(charCode) {
	if (charCode >= base64codes.length) {
		throw new Error("Unable to parse base64 string.");
	}
	const code = base64codes[charCode];
	if (code === 255) {
		throw new Error("Unable to parse base64 string.");
	}
	return code;
}

export function bytesToBase64(bytes) {
	let result = '', i, l = bytes.length;
	for (i = 2; i < l; i += 3) {
		result += base64abc[bytes[i - 2] >> 2];
		result += base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)];
		result += base64abc[((bytes[i - 1] & 0x0F) << 2) | (bytes[i] >> 6)];
		result += base64abc[bytes[i] & 0x3F];
	}
	if (i === l + 1) { // 1 octet yet to write
		result += base64abc[bytes[i - 2] >> 2];
		result += base64abc[(bytes[i - 2] & 0x03) << 4];
		result += "==";
	}
	if (i === l) { // 2 octets yet to write
		result += base64abc[bytes[i - 2] >> 2];
		result += base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)];
		result += base64abc[(bytes[i - 1] & 0x0F) << 2];
		result += "=";
	}
	return result;
}

export function base64ToBytes(str) {
	if (str.length % 4 !== 0) {
		throw new Error("Unable to parse base64 string.");
	}
	const index = str.indexOf("=");
	if (index !== -1 && index < str.length - 2) {
		throw new Error("Unable to parse base64 string.");
	}
	let missingOctets = str.endsWith("==") ? 2 : str.endsWith("=") ? 1 : 0,
		n = str.length,
		result = new Uint8Array(3 * (n / 4)),
		buffer;
	for (let i = 0, j = 0; i < n; i += 4, j += 3) {
		buffer =
			getBase64Code(str.charCodeAt(i)) << 18 |
			getBase64Code(str.charCodeAt(i + 1)) << 12 |
			getBase64Code(str.charCodeAt(i + 2)) << 6 |
			getBase64Code(str.charCodeAt(i + 3));
		result[j] = buffer >> 16;
		result[j + 1] = (buffer >> 8) & 0xFF;
		result[j + 2] = buffer & 0xFF;
	}
	return result.subarray(0, result.length - missingOctets);
}

export function base64encode(str, encoder = new TextEncoder()) {
	return bytesToBase64(encoder.encode(str));
}

export function base64decode(str, decoder = new TextDecoder()) {
	return decoder.decode(base64ToBytes(str));
}

Mở rộng đoạn mã

Question 3

Nếu dữ liệu của bạn có thể chứa các chuỗi nhiều byte (không phải chuỗi ASCII thuần túy) và trình duyệt của bạn có TextDecoder , thì bạn nên sử dụng nó để giải mã dữ liệu của mình (chỉ định mã hóa bắt buộc cho TextDecoder):

var u8 = new Uint8Array([65, 66, 67, 68]);
var decoder = new TextDecoder('utf8');
var b64encoded = btoa(decoder.decode(u8));

Nếu bạn cần hỗ trợ các trình duyệt không có TextDecoder (hiện chỉ có IE và Edge), thì tùy chọn tốt nhất là sử dụng đa điền TextDecoder .

Nếu dữ liệu của bạn chứa ASCII thuần túy (không phải Unicode đa byte / UTF-8) thì có một giải pháp thay thế đơn giản sử dụng String.fromCharCodesẽ được hỗ trợ khá phổ biến:

var ascii = new Uint8Array([65, 66, 67, 68]);
var b64encoded = btoa(String.fromCharCode.apply(null, ascii));

Và để giải mã chuỗi base64 trở lại Uint8Array:

var u8_2 = new Uint8Array(atob(b64encoded).split("").map(function(c) {
    return c.charCodeAt(0); }));

Nếu bạn có bộ đệm mảng rất lớn thì việc áp dụng có thể không thành công và bạn có thể cần phải phân đoạn bộ đệm (dựa trên bộ đệm được đăng bởi @RohitSengar). Một lần nữa, lưu ý rằng điều này chỉ đúng nếu bộ đệm của bạn chỉ chứa các ký tự ASCII không phải nhiều byte:

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));

Question 4

Giải pháp và thử nghiệm rất đơn giản cho 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));

Question 5

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);
}

Bạn có thể sử dụng chức năng này nếu bạn có một Uint8Array rất lớn. Điều này dành cho Javascript, có thể hữu ích trong trường hợp FileReader readAsArrayBuffer.

Question 6

Nếu bạn đang sử dụng Node.js thì bạn có thể sử dụng mã này để chuyển đổi Uint8Array sang base64

var b64 = Buffer.from(u8).toString('base64');

Question 7

Đây là một hàm JS cho điều này:

Chức năng này là cần thiết vì Chrome không chấp nhận chuỗi được mã hóa base64 làm giá trị cho applicationServerKey trong 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;
}

Question 8

JS thuần túy - không có chuỗi middlestep (không có btoa)

Trong giải pháp dưới đây, tôi bỏ qua chuyển đổi thành chuỗi. IDEA đang theo dõi:

nối 3 byte (3 phần tử mảng) và bạn nhận được 24 bit
chia 24 bit thành bốn số 6 bit (nhận các giá trị từ 0 đến 63)
sử dụng các số đó làm chỉ mục trong bảng chữ cái base64
trường hợp góc: khi đầu vào mảng byte có độ dài không chia cho 3 thì thêm =hoặc ==kết quả

Giải pháp dưới đây hoạt động trên các khối 3 byte vì vậy nó tốt cho các mảng lớn. Giải pháp tương tự để chuyển đổi base64 sang mảng nhị phân (không có atob) là TẠI ĐÂY

Hiển thị đoạn mã

function bytesArrToBase64(arr) {
  const abc = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; // base64 alphabet
  const bin = n => n.toString(2).padStart(8,0); // convert num to 8-bit binary string
  const l = arr.length
  let result = '';

  for(let i=0; i<=(l-1)/3; i++) {
    let c1 = i*3+1>=l; // case when "=" is on end
    let c2 = i*3+2>=l; // case when "=" is on end
    let chunk = bin(arr[3*i]) + bin(c1? 0:arr[3*i+1]) + bin(c2? 0:arr[3*i+2]);
    let r = chunk.match(/.{1,6}/g).map((x,j)=> j==3&&c2 ? '=' :(j==2&&c1 ? '=':abc[+('0b'+x)]));  
    result += r.join('');
  }

  return result;
}


// ----------
// TEST
// ----------

let test = "Alice's Adventure in Wondeland.";
let testBytes = [...test].map(c=> c.charCodeAt(0) );

console.log('test string:', test);
console.log('bytes:', JSON.stringify(testBytes));
console.log('btoa            ', btoa(test));
console.log('bytesArrToBase64', bytesArrToBase64(testBytes));

Mở rộng đoạn mã

Question 9

Sử dụng phần sau để chuyển đổi mảng uint8 thành chuỗi mã hóa base64

function arrayBufferToBase64(buffer) {
            var binary = '';
            var bytes = [].slice.call(new Uint8Array(buffer));
            bytes.forEach((b) => binary += String.fromCharCode(b));
            return window.btoa(binary);
        };

Question 10

Xem tại đây https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Append.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer

(Giải mã chuỗi Base64 thành Uint8Array hoặc ArrayBuffer với hỗ trợ Unicode)

Question 11

Một cách tiếp cận rất tốt cho điều này được hiển thị tại trang web Mạng nhà phát triển Mozilla :

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 "☸☹☺☻☼☾☿"

Mở rộng đoạn mã

Question 12

Nếu tất cả những gì bạn muốn là triển khai JS của bộ mã hóa base64, để bạn có thể gửi dữ liệu trở lại, bạn có thể thử btoachức năng này.

b64enc = btoa(uint);

Một vài lưu ý nhanh về btoa - nó không phải là tiêu chuẩn, vì vậy các trình duyệt không bị buộc phải hỗ trợ nó. Tuy nhiên, hầu hết các trình duyệt đều có. Những cái lớn, ít nhất. atoblà chuyển đổi ngược lại.

Nếu bạn cần một triển khai khác hoặc bạn tìm thấy một trường hợp phức tạp mà trình duyệt không biết bạn đang nói gì, việc tìm kiếm bộ mã hóa base64 cho JS sẽ không quá khó.

Tôi nghĩ rằng có 3 người trong số họ quanh quẩn trên trang web của công ty tôi, vì một số lý do ...

Question 13

npm cài đặt google-close-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.jssẽ ghi AVMbY2Y = vào bảng điều khiển.