HEX to Base64 converter for JavaScript - javascript

Anyone know of a good snippet of JavaScript code to convert HEX encoded strings to base64 encoded strings?

If you're working in Node or using Browserify, you can use
var base64String = Buffer.from(hexString, 'hex').toString('base64')
or
var hexString = Buffer.from(base64String, 'base64').toString('hex')

The excellent comment by #dandavis is modified by StackOverflow, and has some weird hidden characters.
Here it is as one liner :
btoa("a6b580481008e60df9350de170b7e728".match(/\w{2}/g).map(function(a){return String.fromCharCode(parseInt(a, 16));} ).join(""))
or :
function hexToBase64(hexstring) {
return btoa(hexstring.match(/\w{2}/g).map(function(a) {
return String.fromCharCode(parseInt(a, 16));
}).join(""));
}
hexToBase64("a6b580481008e60df9350de170b7e728");
Both return :
"prWASBAI5g35NQ3hcLfnKA=="
Note that the hex string should have an even length :
hexToBase64("00");
// => "AA=="
hexToBase64("000");
// => "AA=="

if (!window.atob) {
var tableStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var table = tableStr.split("");
window.atob = function (base64) {
if (/(=[^=]+|={3,})$/.test(base64)) throw new Error("String contains an invalid character");
base64 = base64.replace(/=/g, "");
var n = base64.length & 3;
if (n === 1) throw new Error("String contains an invalid character");
for (var i = 0, j = 0, len = base64.length / 4, bin = []; i < len; ++i) {
var a = tableStr.indexOf(base64[j++] || "A"), b = tableStr.indexOf(base64[j++] || "A");
var c = tableStr.indexOf(base64[j++] || "A"), d = tableStr.indexOf(base64[j++] || "A");
if ((a | b | c | d) < 0) throw new Error("String contains an invalid character");
bin[bin.length] = ((a << 2) | (b >> 4)) & 255;
bin[bin.length] = ((b << 4) | (c >> 2)) & 255;
bin[bin.length] = ((c << 6) | d) & 255;
};
return String.fromCharCode.apply(null, bin).substr(0, bin.length + n - 4);
};
window.btoa = function (bin) {
for (var i = 0, j = 0, len = bin.length / 3, base64 = []; i < len; ++i) {
var a = bin.charCodeAt(j++), b = bin.charCodeAt(j++), c = bin.charCodeAt(j++);
if ((a | b | c) > 255) throw new Error("String contains an invalid character");
base64[base64.length] = table[a >> 2] + table[((a << 4) & 63) | (b >> 4)] +
(isNaN(b) ? "=" : table[((b << 2) & 63) | (c >> 6)]) +
(isNaN(b + c) ? "=" : table[c & 63]);
}
return base64.join("");
};
}
function hexToBase64(str) {
return btoa(String.fromCharCode.apply(null,
str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" "))
);
}
function base64ToHex(str) {
for (var i = 0, bin = atob(str.replace(/[ \r\n]+$/, "")), hex = []; i < bin.length; ++i) {
var tmp = bin.charCodeAt(i).toString(16);
if (tmp.length === 1) tmp = "0" + tmp;
hex[hex.length] = tmp;
}
return hex.join(" ");
}

I liked the approach from #eric-duminil nevertheless the solution below - avoiding regex - is ~2x faster.
Browser:
function hexToBase64(hexStr) {
return btoa([...hexStr].reduce((acc, _, i) =>
acc += !(i - 1 & 1) ? String.fromCharCode(parseInt(hexStr.substring(i - 1, i + 1), 16)) : ""
,""));
}
OR
// even a bit faster
function hexToBase64(hexStr) {
let base64 = "";
for(let i = 0; i < hexStr.length; i++) {
base64 += !(i - 1 & 1) ? String.fromCharCode(parseInt(hexStr.substring(i - 1, i + 1), 16)) : ""
}
return btoa(base64);
}
Node:
const base64 = Buffer.from(hexStr, 'hex').toString('base64');

Large strings, no btoa
Solution below is good for large strings - if you want to get bytes from base64 then look HERE
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;
}
function hexToBytes(hexString) {
return hexString.match(/.{1,2}/g).map(x=> +('0x'+x));
}
// ---------
// TEST
// ---------
let hexString = "a6b580481008e60df9350de170b7e728";
let bytes = hexToBytes(hexString);
let base64 = bytesArrToBase64(bytes);
console.log(base64);

Related

Hashing password authentication with JavaScript?

Password = base64 encoded(sha1(nonce+created+secret))
where:
nonce = 186269,
created = 2015-07-08T11:31:53+01:00,
secret = Ok4IWYLBHbKn8juM1gFPvQxadieZmS2
should give ZDg3MTZiZTgwYTMwYWY4Nzc4OGFjMmZhYjA5YzM3MTdlYmQ1M2ZkMw== as password. I am approaching with:
I need the JavaScript for this.
As per security standards this is still not good to perform such coding, one should always do this in backend programming language & get value from API Calls.
but you can use the sha1 function below to do sha1 hashing in JavaScript:
function sha1 (str) {
// discuss at: https://locutus.io/php/sha1/
// original by: Webtoolkit.info (https://www.webtoolkit.info/)
// improved by: Michael White (https://getsprink.com)
// improved by: Kevin van Zonneveld (https://kvz.io)
// input by: Brett Zamir (https://brett-zamir.me)
// note 1: Keep in mind that in accordance with PHP, the whole string is buffered and then
// note 1: hashed. If available, we'd recommend using Node's native crypto modules directly
// note 1: in a steaming fashion for faster and more efficient hashing
// example 1: sha1('Kevin van Zonneveld')
// returns 1: '54916d2e62f65b3afa6e192e6a601cdbe5cb5897'
let hash
try {
const crypto = require('crypto')
const sha1sum = crypto.createHash('sha1')
sha1sum.update(str)
hash = sha1sum.digest('hex')
} catch (e) {
hash = undefined
}
if (hash !== undefined) {
return hash
}
const _rotLeft = function (n, s) {
const t4 = (n << s) | (n >>> (32 - s))
return t4
}
const _cvtHex = function (val) {
let str = ''
let i
let v
for (i = 7; i >= 0; i--) {
v = (val >>> (i * 4)) & 0x0f
str += v.toString(16)
}
return str
}
let blockstart
let i, j
const W = new Array(80)
let H0 = 0x67452301
let H1 = 0xEFCDAB89
let H2 = 0x98BADCFE
let H3 = 0x10325476
let H4 = 0xC3D2E1F0
let A, B, C, D, E
let temp
// utf8_encode
str = unescape(encodeURIComponent(str))
const strLen = str.length
const wordArray = []
for (i = 0; i < strLen - 3; i += 4) {
j = str.charCodeAt(i) << 24 |
str.charCodeAt(i + 1) << 16 |
str.charCodeAt(i + 2) << 8 |
str.charCodeAt(i + 3)
wordArray.push(j)
}
switch (strLen % 4) {
case 0:
i = 0x080000000
break
case 1:
i = str.charCodeAt(strLen - 1) << 24 | 0x0800000
break
case 2:
i = str.charCodeAt(strLen - 2) << 24 | str.charCodeAt(strLen - 1) << 16 | 0x08000
break
case 3:
i = str.charCodeAt(strLen - 3) << 24 |
str.charCodeAt(strLen - 2) << 16 |
str.charCodeAt(strLen - 1) <<
8 | 0x80
break
}
wordArray.push(i)
while ((wordArray.length % 16) !== 14) {
wordArray.push(0)
}
wordArray.push(strLen >>> 29)
wordArray.push((strLen << 3) & 0x0ffffffff)
for (blockstart = 0; blockstart < wordArray.length; blockstart += 16) {
for (i = 0; i < 16; i++) {
W[i] = wordArray[blockstart + i]
}
for (i = 16; i <= 79; i++) {
W[i] = _rotLeft(W[i - 3] ^ W[i - 8] ^ W[i - 14] ^ W[i - 16], 1)
}
A = H0
B = H1
C = H2
D = H3
E = H4
for (i = 0; i <= 19; i++) {
temp = (_rotLeft(A, 5) + ((B & C) | (~B & D)) + E + W[i] + 0x5A827999) & 0x0ffffffff
E = D
D = C
C = _rotLeft(B, 30)
B = A
A = temp
}
for (i = 20; i <= 39; i++) {
temp = (_rotLeft(A, 5) + (B ^ C ^ D) + E + W[i] + 0x6ED9EBA1) & 0x0ffffffff
E = D
D = C
C = _rotLeft(B, 30)
B = A
A = temp
}
for (i = 40; i <= 59; i++) {
temp = (_rotLeft(A, 5) + ((B & C) | (B & D) | (C & D)) + E + W[i] + 0x8F1BBCDC) & 0x0ffffffff
E = D
D = C
C = _rotLeft(B, 30)
B = A
A = temp
}
for (i = 60; i <= 79; i++) {
temp = (_rotLeft(A, 5) + (B ^ C ^ D) + E + W[i] + 0xCA62C1D6) & 0x0ffffffff
E = D
D = C
C = _rotLeft(B, 30)
B = A
A = temp
}
H0 = (H0 + A) & 0x0ffffffff
H1 = (H1 + B) & 0x0ffffffff
H2 = (H2 + C) & 0x0ffffffff
H3 = (H3 + D) & 0x0ffffffff
H4 = (H4 + E) & 0x0ffffffff
}
temp = _cvtHex(H0) + _cvtHex(H1) + _cvtHex(H2) + _cvtHex(H3) + _cvtHex(H4)
return temp.toLowerCase()
}
// create sha1
var e = sha1('186269'+'2015-07-08T11:31:53+01:00'+'Ok4IWYLBHbKn8juM1gFPvQxadieZmS2');
console.log(e)
// to base64 encoding
var encoded = btoa(e)
console.log(encoded)
Function link: https://locutus.io/php/sha1/

i receive data type Uint8Array from port serial how can i transfer to decimal value [ web serial port ] [duplicate]

I have some UTF-8 encoded data living in a range of Uint8Array elements in Javascript. Is there an efficient way to decode these out to a regular javascript string (I believe Javascript uses 16 bit Unicode)? I dont want to add one character at the time as the string concaternation would become to CPU intensive.
TextEncoder and TextDecoder from the Encoding standard, which is polyfilled by the stringencoding library, converts between strings and ArrayBuffers:
var uint8array = new TextEncoder().encode("someString");
var string = new TextDecoder().decode(uint8array);
This should work:
// http://www.onicos.com/staff/iz/amuse/javascript/expert/utf.txt
/* utf.js - UTF-8 <=> UTF-16 convertion
*
* Copyright (C) 1999 Masanao Izumo <iz#onicos.co.jp>
* Version: 1.0
* LastModified: Dec 25 1999
* This library is free. You can redistribute it and/or modify it.
*/
function Utf8ArrayToStr(array) {
var out, i, len, c;
var char2, char3;
out = "";
len = array.length;
i = 0;
while(i < len) {
c = array[i++];
switch(c >> 4)
{
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
// 0xxxxxxx
out += String.fromCharCode(c);
break;
case 12: case 13:
// 110x xxxx 10xx xxxx
char2 = array[i++];
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = array[i++];
char3 = array[i++];
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}
It's somewhat cleaner as the other solutions because it doesn't use any hacks nor depends on Browser JS functions, e.g. works also in other JS environments.
Check out the JSFiddle demo.
Also see the related questions: here and here
Here's what I use:
var str = String.fromCharCode.apply(null, uint8Arr);
In Node "Buffer instances are also Uint8Array instances", so buf.toString() works in this case.
In NodeJS, we have Buffers available, and string conversion with them is really easy. Better, it's easy to convert a Uint8Array to a Buffer. Try this code, it's worked for me in Node for basically any conversion involving Uint8Arrays:
let str = Buffer.from(uint8arr.buffer).toString();
We're just extracting the ArrayBuffer from the Uint8Array and then converting that to a proper NodeJS Buffer. Then we convert the Buffer to a string (you can throw in a hex or base64 encoding if you want).
If we want to convert back to a Uint8Array from a string, then we'd do this:
let uint8arr = new Uint8Array(Buffer.from(str));
Be aware that if you declared an encoding like base64 when converting to a string, then you'd have to use Buffer.from(str, "base64") if you used base64, or whatever other encoding you used.
This will not work in the browser without a module! NodeJS Buffers just don't exist in the browser, so this method won't work unless you add Buffer functionality to the browser. That's actually pretty easy to do though, just use a module like this, which is both small and fast!
Found in one of the Chrome sample applications, although this is meant for larger blocks of data where you're okay with an asynchronous conversion.
/**
* Converts an array buffer to a string
*
* #private
* #param {ArrayBuffer} buf The buffer to convert
* #param {Function} callback The function to call when conversion is complete
*/
function _arrayBufferToString(buf, callback) {
var bb = new Blob([new Uint8Array(buf)]);
var f = new FileReader();
f.onload = function(e) {
callback(e.target.result);
};
f.readAsText(bb);
}
The solution given by Albert works well as long as the provided function is invoked infrequently and is only used for arrays of modest size, otherwise it is egregiously inefficient. Here is an enhanced vanilla JavaScript solution that works for both Node and browsers and has the following advantages:
• Works efficiently for all octet array sizes
• Generates no intermediate throw-away strings
• Supports 4-byte characters on modern JS engines (otherwise "?" is substituted)
var utf8ArrayToStr = (function () {
var charCache = new Array(128); // Preallocate the cache for the common single byte chars
var charFromCodePt = String.fromCodePoint || String.fromCharCode;
var result = [];
return function (array) {
var codePt, byte1;
var buffLen = array.length;
result.length = 0;
for (var i = 0; i < buffLen;) {
byte1 = array[i++];
if (byte1 <= 0x7F) {
codePt = byte1;
} else if (byte1 <= 0xDF) {
codePt = ((byte1 & 0x1F) << 6) | (array[i++] & 0x3F);
} else if (byte1 <= 0xEF) {
codePt = ((byte1 & 0x0F) << 12) | ((array[i++] & 0x3F) << 6) | (array[i++] & 0x3F);
} else if (String.fromCodePoint) {
codePt = ((byte1 & 0x07) << 18) | ((array[i++] & 0x3F) << 12) | ((array[i++] & 0x3F) << 6) | (array[i++] & 0x3F);
} else {
codePt = 63; // Cannot convert four byte code points, so use "?" instead
i += 3;
}
result.push(charCache[codePt] || (charCache[codePt] = charFromCodePt(codePt)));
}
return result.join('');
};
})();
Uint8Array to String
let str = Buffer.from(key.secretKey).toString('base64');
String to Uint8Array
let uint8arr = new Uint8Array(Buffer.from(data,'base64'));
I was frustrated to see that people were not showing how to go both ways or showing that things work on none trivial UTF8 strings. I found a post on codereview.stackexchange.com that has some code that works well. I used it to turn ancient runes into bytes, to test some crypo on the bytes, then convert things back into a string. The working code is on github here. I renamed the methods for clarity:
// https://codereview.stackexchange.com/a/3589/75693
function bytesToSring(bytes) {
var chars = [];
for(var i = 0, n = bytes.length; i < n;) {
chars.push(((bytes[i++] & 0xff) << 8) | (bytes[i++] & 0xff));
}
return String.fromCharCode.apply(null, chars);
}
// https://codereview.stackexchange.com/a/3589/75693
function stringToBytes(str) {
var bytes = [];
for(var i = 0, n = str.length; i < n; i++) {
var char = str.charCodeAt(i);
bytes.push(char >>> 8, char & 0xFF);
}
return bytes;
}
The unit test uses this UTF-8 string:
// http://kermitproject.org/utf8.html
// From the Anglo-Saxon Rune Poem (Rune version)
const secretUtf8 = `ᚠᛇᚻ᛫ᛒᛦᚦ᛫ᚠᚱᚩᚠᚢᚱ᛫ᚠᛁᚱᚪ᛫ᚷᛖᚻᚹᛦᛚᚳᚢᛗ
ᛋᚳᛖᚪᛚ᛫ᚦᛖᚪᚻ᛫ᛗᚪᚾᚾᚪ᛫ᚷᛖᚻᚹᛦᛚᚳ᛫ᛗᛁᚳᛚᚢᚾ᛫ᚻᛦᛏ᛫ᛞᚫᛚᚪᚾ
ᚷᛁᚠ᛫ᚻᛖ᛫ᚹᛁᛚᛖ᛫ᚠᚩᚱ᛫ᛞᚱᛁᚻᛏᚾᛖ᛫ᛞᚩᛗᛖᛋ᛫ᚻᛚᛇᛏᚪᚾ᛬`;
Note that the string length is only 117 characters but the byte length, when encoded, is 234.
If I uncomment the console.log lines I can see that the string that is decoded is the same string that was encoded (with the bytes passed through Shamir's secret sharing algorithm!):
Do what #Sudhir said, and then to get a String out of the comma seperated list of numbers use:
for (var i=0; i<unitArr.byteLength; i++) {
myString += String.fromCharCode(unitArr[i])
}
This will give you the string you want,
if it's still relevant
If you can't use the TextDecoder API because it is not supported on IE:
You can use the FastestSmallestTextEncoderDecoder polyfill recommended by the Mozilla Developer Network website;
You can use this function also provided at the MDN website:
function utf8ArrayToString(aBytes) {
var sView = "";
for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
nPart = aBytes[nIdx];
sView += String.fromCharCode(
nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
/* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
(nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
: nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
(nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
: nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
(nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
: nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
(nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
: nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
(nPart - 192 << 6) + aBytes[++nIdx] - 128
: /* nPart < 127 ? */ /* one byte */
nPart
);
}
return sView;
}
let str = utf8ArrayToString([50,72,226,130,130,32,43,32,79,226,130,130,32,226,135,140,32,50,72,226,130,130,79]);
// Must show 2H₂ + O₂ ⇌ 2H₂O
console.log(str);
Try these functions,
var JsonToArray = function(json)
{
var str = JSON.stringify(json, null, 0);
var ret = new Uint8Array(str.length);
for (var i = 0; i < str.length; i++) {
ret[i] = str.charCodeAt(i);
}
return ret
};
var binArrayToJson = function(binArray)
{
var str = "";
for (var i = 0; i < binArray.length; i++) {
str += String.fromCharCode(parseInt(binArray[i]));
}
return JSON.parse(str)
}
source: https://gist.github.com/tomfa/706d10fed78c497731ac, kudos to Tomfa
I'm using this function, which works for me:
function uint8ArrayToBase64(data) {
return btoa(Array.from(data).map((c) => String.fromCharCode(c)).join(''));
}
For ES6 and UTF8 string
decodeURIComponent(escape(String.fromCharCode(...uint8arrData)))
By far the easiest way that has worked for me is:
//1. Create or fetch the Uint8Array to use in the example
const bufferArray = new Uint8Array([10, 10, 10])
//2. Turn the Uint8Array into a regular array
const array = Array.from(bufferArray);
//3. Stringify it (option A)
JSON.stringify(array);
//3. Stringify it (option B: uses #serdarsenay code snippet to decode each item in array)
let binArrayToString = function(binArray) {
let str = "";
for (let i = 0; i < binArray.length; i++) {
str += String.fromCharCode(parseInt(binArray[i]));
}
return str;
}
binArrayToString(array);
class UTF8{
static encode(str:string){return new UTF8().encode(str)}
static decode(data:Uint8Array){return new UTF8().decode(data)}
private EOF_byte:number = -1;
private EOF_code_point:number = -1;
private encoderError(code_point) {
console.error("UTF8 encoderError",code_point)
}
private decoderError(fatal, opt_code_point?):number {
if (fatal) console.error("UTF8 decoderError",opt_code_point)
return opt_code_point || 0xFFFD;
}
private inRange(a:number, min:number, max:number) {
return min <= a && a <= max;
}
private div(n:number, d:number) {
return Math.floor(n / d);
}
private stringToCodePoints(string:string) {
/** #type {Array.<number>} */
let cps = [];
// Based on http://www.w3.org/TR/WebIDL/#idl-DOMString
let i = 0, n = string.length;
while (i < string.length) {
let c = string.charCodeAt(i);
if (!this.inRange(c, 0xD800, 0xDFFF)) {
cps.push(c);
} else if (this.inRange(c, 0xDC00, 0xDFFF)) {
cps.push(0xFFFD);
} else { // (inRange(c, 0xD800, 0xDBFF))
if (i == n - 1) {
cps.push(0xFFFD);
} else {
let d = string.charCodeAt(i + 1);
if (this.inRange(d, 0xDC00, 0xDFFF)) {
let a = c & 0x3FF;
let b = d & 0x3FF;
i += 1;
cps.push(0x10000 + (a << 10) + b);
} else {
cps.push(0xFFFD);
}
}
}
i += 1;
}
return cps;
}
private encode(str:string):Uint8Array {
let pos:number = 0;
let codePoints = this.stringToCodePoints(str);
let outputBytes = [];
while (codePoints.length > pos) {
let code_point:number = codePoints[pos++];
if (this.inRange(code_point, 0xD800, 0xDFFF)) {
this.encoderError(code_point);
}
else if (this.inRange(code_point, 0x0000, 0x007f)) {
outputBytes.push(code_point);
} else {
let count = 0, offset = 0;
if (this.inRange(code_point, 0x0080, 0x07FF)) {
count = 1;
offset = 0xC0;
} else if (this.inRange(code_point, 0x0800, 0xFFFF)) {
count = 2;
offset = 0xE0;
} else if (this.inRange(code_point, 0x10000, 0x10FFFF)) {
count = 3;
offset = 0xF0;
}
outputBytes.push(this.div(code_point, Math.pow(64, count)) + offset);
while (count > 0) {
let temp = this.div(code_point, Math.pow(64, count - 1));
outputBytes.push(0x80 + (temp % 64));
count -= 1;
}
}
}
return new Uint8Array(outputBytes);
}
private decode(data:Uint8Array):string {
let fatal:boolean = false;
let pos:number = 0;
let result:string = "";
let code_point:number;
let utf8_code_point = 0;
let utf8_bytes_needed = 0;
let utf8_bytes_seen = 0;
let utf8_lower_boundary = 0;
while (data.length > pos) {
let _byte = data[pos++];
if (_byte == this.EOF_byte) {
if (utf8_bytes_needed != 0) {
code_point = this.decoderError(fatal);
} else {
code_point = this.EOF_code_point;
}
} else {
if (utf8_bytes_needed == 0) {
if (this.inRange(_byte, 0x00, 0x7F)) {
code_point = _byte;
} else {
if (this.inRange(_byte, 0xC2, 0xDF)) {
utf8_bytes_needed = 1;
utf8_lower_boundary = 0x80;
utf8_code_point = _byte - 0xC0;
} else if (this.inRange(_byte, 0xE0, 0xEF)) {
utf8_bytes_needed = 2;
utf8_lower_boundary = 0x800;
utf8_code_point = _byte - 0xE0;
} else if (this.inRange(_byte, 0xF0, 0xF4)) {
utf8_bytes_needed = 3;
utf8_lower_boundary = 0x10000;
utf8_code_point = _byte - 0xF0;
} else {
this.decoderError(fatal);
}
utf8_code_point = utf8_code_point * Math.pow(64, utf8_bytes_needed);
code_point = null;
}
} else if (!this.inRange(_byte, 0x80, 0xBF)) {
utf8_code_point = 0;
utf8_bytes_needed = 0;
utf8_bytes_seen = 0;
utf8_lower_boundary = 0;
pos--;
code_point = this.decoderError(fatal, _byte);
} else {
utf8_bytes_seen += 1;
utf8_code_point = utf8_code_point + (_byte - 0x80) * Math.pow(64, utf8_bytes_needed - utf8_bytes_seen);
if (utf8_bytes_seen !== utf8_bytes_needed) {
code_point = null;
} else {
let cp = utf8_code_point;
let lower_boundary = utf8_lower_boundary;
utf8_code_point = 0;
utf8_bytes_needed = 0;
utf8_bytes_seen = 0;
utf8_lower_boundary = 0;
if (this.inRange(cp, lower_boundary, 0x10FFFF) && !this.inRange(cp, 0xD800, 0xDFFF)) {
code_point = cp;
} else {
code_point = this.decoderError(fatal, _byte);
}
}
}
}
//Decode string
if (code_point !== null && code_point !== this.EOF_code_point) {
if (code_point <= 0xFFFF) {
if (code_point > 0)result += String.fromCharCode(code_point);
} else {
code_point -= 0x10000;
result += String.fromCharCode(0xD800 + ((code_point >> 10) & 0x3ff));
result += String.fromCharCode(0xDC00 + (code_point & 0x3ff));
}
}
}
return result;
}
`
Using base64 as the encoding format works quite well. This is how it was implemented for passing secrets via urls in Firefox Send. You will need the base64-js package. These are the functions from the Send source code:
const b64 = require("base64-js")
function arrayToB64(array) {
return b64.fromByteArray(array).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
}
function b64ToArray(str) {
return b64.toByteArray(str + "===".slice((str.length + 3) % 4))
}
With vanilla, browser side, recording from microphone, base64 functions worked for me (I had to implement an audio sending function to a chat).
const ui8a = new Uint8Array(e.target.result);
const string = btoa(ui8a);
const ui8a_2 = atob(string).split(',');
Full code now. Thanks to Bryan Jennings & breakspirit#py4u.net for the code.
https://medium.com/#bryanjenningz/how-to-record-and-play-audio-in-javascript-faa1b2b3e49b
https://www.py4u.net/discuss/282499
index.html
<html>
<head>
<title>Record Audio Test</title>
<meta name="encoding" charset="utf-8" />
</head>
<body>
<h1>Audio Recording Test</h1>
<script src="index.js"></script>
<button id="action" onclick="start()">Start</button>
<button id="stop" onclick="stop()">Stop</button>
<button id="play" onclick="play()">Listen</button>
</body>
</html>
index.js:
const recordAudio = () =>
new Promise(async resolve => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
const start = () => mediaRecorder.start();
const stop = () =>
new Promise(resolve => {
mediaRecorder.addEventListener("stop", () => {
const audioBlob = new Blob(audioChunks);
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
const play = () => audio.play();
resolve({ audioBlob, audioUrl, play });
});
mediaRecorder.stop();
});
resolve({ start, stop });
});
let recorder = null;
let audio = null;
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
const start = async () => {
recorder = await recordAudio();
recorder.start();
}
const stop = async () => {
audio = await recorder.stop();
read(audio.audioUrl);
}
const play = ()=> {
audio.play();
}
const read = (blobUrl)=> {
var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';
xhr.onload = function() {
var recoveredBlob = xhr.response;
const reader = new FileReader();
// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e) => {
const ui8a = new Uint8Array(e.target.result);
const string = btoa(ui8a);
const ui8a_2 = atob(string).split(',');
playByteArray(ui8a_2);
});
// Start reading the blob as text.
reader.readAsArrayBuffer(recoveredBlob);
};
// get the blob through blob url
xhr.open('GET', blobUrl);
xhr.send();
}
window.onload = init;
var context; // Audio context
var buf; // Audio buffer
function init() {
if (!window.AudioContext) {
if (!window.webkitAudioContext) {
alert("Your browser does not support any AudioContext and cannot play back this audio.");
return;
}
window.AudioContext = window.webkitAudioContext;
}
context = new AudioContext();
}
function playByteArray(byteArray) {
var arrayBuffer = new ArrayBuffer(byteArray.length);
var bufferView = new Uint8Array(arrayBuffer);
for (i = 0; i < byteArray.length; i++) {
bufferView[i] = byteArray[i];
}
context.decodeAudioData(arrayBuffer, function(buffer) {
buf = buffer;
play2();
});
}
// Play the loaded file
function play2() {
// Create a source node from the buffer
var source = context.createBufferSource();
source.buffer = buf;
// Connect to the final output node (the speakers)
source.connect(context.destination);
// Play immediately
source.start(0);
}
var decodedString = decodeURIComponent(escape(String.fromCharCode(...new Uint8Array(err))));
var obj = JSON.parse(decodedString);
I am using this Typescript snippet:
function UInt8ArrayToString(uInt8Array: Uint8Array): string
{
var s: string = "[";
for(var i: number = 0; i < uInt8Array.byteLength; i++)
{
if( i > 0 )
s += ", ";
s += uInt8Array[i];
}
s += "]";
return s;
}
Remove the type annotations if you need the JavaScript version.
Hope this helps!

decodeURIComponent Polyfill in pure js

I know "decodeURIComponent" is supported in every known browser , but i'm trying to understand it a bit better by trying to polyfill it .
there are many polyfills for Atob,Btoa.... but for some reason i didn't find any polyfill for "decodeURIComponent" any reason why?
There is no polyfill because decodeURIComponent has been supported since ES3.
The section "URI Handling Function Properties" of the EcmaScript Language Specification defines the algorithm for decoding a URI (Decode). It is an internal function that is called by both decodeURI and decodeURIComponent. The latter two functions are really simple wrappers around Decode and only differ in which characters are considered "reserved". For decodeURIComponent it is simple: there are no reserved characters.
I have here implemented Decode and decodeURIComponent according to those specifications:
function Decode(string, reservedSet) {
const strLen = string.length;
let result = "";
for (let k = 0; k < strLen; k++) {
let chr = string[k];
let str = chr;
if (chr === '%') {
const start = k;
let byte = +`0x${string.slice(k+1, k+3)}`;
if (Number.isNaN(byte) || k + 2 >= strLen) throw new URIError;
k += 2;
if (byte < 0x80) {
chr = String.fromCharCode(byte);
str = reservedSet.includes(chr) ? string.slice(start, k + 1) : chr;
} else { // the most significant bit in byte is 1
let n = Math.clz32(byte ^ 0xFF) - 24; // Position of first right-most 10 in binary
if (n < 2 || n > 4) throw new URIError;
let value = byte & (0x3F >> n);
if (k + (3 * (n - 1)) >= strLen) throw new URIError;
for (let j = 1; j < n; j++) {
if (string[++k] !== '%') throw new URIError;
let byte = +`0x${string.slice(k+1, k+3)}`;
if (Number.isNaN(byte) || ((byte & 0xC0) != 0x80)) throw new URIError;
k += 2;
value = (value<<6) + (byte & 0x3F);
}
if (value >= 0xD800 && value < 0xE000 || value >= 0x110000) throw new URIError;
if (value < 0x10000) {
chr = String.fromCharCode(value);
str = reservedSet.includes(chr) ? string.slice(start, k + 1) : chr;
} else { // value is ≥ 0x10000
const low = ((value - 0x10000) & 0x3FF) + 0xDC00;
const high = (((value - 0x10000) >> 10) & 0x3FF) + 0xD800;
str = String.fromCharCode(high) + String.fromCharCode(low);
}
}
}
result += str;
}
return result;
}
function decodeURIComponent(encoded) {
return Decode(encoded.toString(), "");
}
// Demo
const test = "a€=#;🁚ñà😀x";
console.log("test: " + test);
const encoded = encodeURIComponent(test);
console.log("encoded: " + encoded);
const decoded = decodeURIComponent(encoded);
console.log("decoded: " + decoded);

How to decode base64 encoded image with JS/PHP? (previously encoded with Actionscript)

I have an image encoded to base64, made with an ActionScript function:
private static const BASE64_CHARS:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
public static function encodeByteArray(_arg1:ByteArray):String {
var _local3:Array;
var _local5:uint;
var _local6:uint;
var _local7:uint;
var _local2 = "";
var _local4:Array = new Array(4);
_arg1.position = 0;
while (_arg1.bytesAvailable > 0) {
_local3 = new Array();
_local5 = 0;
while ((((_local5 < 3)) && ((_arg1.bytesAvailable > 0)))) {
_local3[_local5] = _arg1.readUnsignedByte();
_local5++;
};
_local4[0] = ((_local3[0] & 252) >> 2);
_local4[1] = (((_local3[0] & 3) << 4) | (_local3[1] >> 4));
_local4[2] = (((_local3[1] & 15) << 2) | (_local3[2] >> 6));
_local4[3] = (_local3[2] & 63);
_local6 = _local3.length;
while (_local6 < 3) {
_local4[(_local6 + 1)] = 64;
_local6++;
};
_local7 = 0;
while (_local7 < _local4.length) {
_local2 = (_local2 + BASE64_CHARS.charAt(_local4[_local7]));
_local7++;
};
};
return (_local2);
}
Now I'm trying to decode (with no success) the string in JS/PHP and have back the image.
Here is the Actionscript decoding function:
public static function decodeToByteArray(_arg1:String):ByteArray{
var _local6:uint;
var _local7:uint;
var _local2:ByteArray = new ByteArray();
var _local3:Array = new Array(4);
var _local4:Array = new Array(3);
var _local5:uint;
while (_local5 < _arg1.length) {
_local6 = 0;
while ((((_local6 < 4)) && (((_local5 + _local6) < _arg1.length)))) {
_local3[_local6] = BASE64_CHARS.indexOf(_arg1.charAt((_local5 + _local6)));
_local6++;
};
_local4[0] = ((_local3[0] << 2) + ((_local3[1] & 48) >> 4));
_local4[1] = (((_local3[1] & 15) << 4) + ((_local3[2] & 60) >> 2));
_local4[2] = (((_local3[2] & 3) << 6) + _local3[3]);
_local7 = 0;
while (_local7 < _local4.length) {
if (_local3[(_local7 + 1)] == 64){
break;
};
_local2.writeByte(_local4[_local7]);
_local7++;
};
_local5 = (_local5 + 4);
};
_local2.position = 0;
return (_local2);
}
I tried to convert the decoding Aactionscript function to JS but I'm missing the new ByteArray(); I don't know how to manage that.
I need a way to decode the encoded image string back to an image.
Here a sample base64 string of an image, encoded with the "encodeByteArray" function:
sample base64 encoded string
thanks for the help.
To output your base64 image use this format:
<img src="data:image/png;base64,ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=" />

javascript unicode base64 encode

I'm trying to convert a string to unicode and then base64 encode it in javascript but can't seem to find out how. I need it to encode my PowerShell commands so i can use -EncodedCommand command line parameter in my VMware Orchestrator project.
$cmd = 'New-Item -Path "C:\" -Name "Test" -ItemType Directory'
$bytes = [Text.Encoding]::Unicode.GetBytes($cmd)
$encodedCommand = [Convert]::ToBase64String($bytes)
The output looks like this: TgBlAHcALQBJAHQAZQBtACAALQBQAGEAdABoACAAIgBDADoAXAAiACAALQBOAGEAbQBlACAAIgBUAGUAcwB0ACIAIAAtAEkAdABlAG0AVAB5AHAAZQAgAEQAaQByAGUAYwB0AG8AcgB5AA==
How can I do this in javascript?
Assuming you can use String.fromCharCode, you can re-build the String to contain the zero-bytes (i.e. use String for binary data) and then encode that as Base64.
var cmd = 'New-Item -Path "C:\\" -Name "Test" -ItemType Directory',
ar = new Array(cmd.length * 2),
i, j, s, b64;
// build array of bytes
for (i = 0, j = 0; i < cmd.length; j = 2 * ++i)
ar[j] = cmd.charCodeAt(i);
// build string from array
s = String.fromCharCode.apply(String, ar);
// to base64
b64 = btoa(s);
This method avoids needing Blob, FileReader or an async method.
Just wrote a library for converting binary data between base64, base16, base8 and base6, and for converting utf8 and utf16 between them, too. These functions all work with Array, ArrayBuffer and Uint?Array, with the exception of Conv86.utfX.toY functions which take String.
var Conv86 = (function () {
var chars = (
'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +
'abcdefghijklmnopqrstuvwxyz' +
'0123456789+/'
),
inver = {}, i;
for (i = 0; i < chars.length; ++i) {
inver[chars[i]] = i;
}
function base8To6(arr8) {
var arr6 = [], i,
e1, e2, e3,
s1, s2, s3, s4,
d1, d2, d3;
for (i = 0; i < arr8.length; i += 3) {
e1 = (d1 = arr8[i] ) & 255;
e2 = (d2 = arr8[i + 1]) & 255;
e3 = (d3 = arr8[i + 2]) & 255;
// wwwwwwxx xxxxyyyy yyzzzzzz
s1 = e1 >>> 2 ;
s2 = ((e1 & 3) << 4) + (e2 >>> 4);
s3 = ((e2 & 15) << 2) + (e3 >>> 6);
s4 = e3 & 63 ;
arr6.push(s1, s2);
if (d3 !== undefined)
arr6.push(s3, s4);
else if (d2 !== undefined)
arr6.push(s3);
}
arr6.byteLength = arr8.length;
return arr6;
}
function base6To8(arr6) {
var arr8 = [], i,
e1, e2, e3,
s1, s2, s3, s4,
d1, d2, d3, d4;
for (i = 0; i < arr6.length; i += 4) {
s1 = (d1 = arr6[i] ) & 63;
s2 = (d2 = arr6[i + 1]) & 63;
s3 = (d3 = arr6[i + 2]) & 63;
s4 = (d4 = arr6[i + 3]) & 63;
// xxxxxx xxyyyy yyyyzz zzzzzz
e1 = ( s1 << 2) + (s2 >>> 4);
e2 = ((s2 & 15) << 4) + (s3 >>> 2);
e3 = ((s3 & 3) << 6) + s4 ;
arr8.push(e1);
if (d3 !== undefined)
arr8.push(e2, e3);
else if (d2 !== undefined )
arr8.push(e2);
}
if (arr6.byteLength !== undefined)
arr8.length = +arr6.byteLength;
return arr8;
}
function base6To64(arr6) {
var i, b64 = '';
for (i = 0; i < arr6.length; ++i) b64 += chars.charAt(arr6[i]);
/*if (arr6.bytesLength) {
i = arr6.bytesLength % 3;
if (i) ++i;
} else */
i = b64.length % 4;
b64 += ['', '==', '==', '='][i];
return b64;
}
function base8To64(arr8) {
return base6To64(base8To6(arr8));
}
function base64To6(b64) {
var arr6 = [],
i = b64.length, lenMod = 0;
while (b64.charAt(--i) === '=')
++lenMod;
for (i = 0; i < b64.length - lenMod; ++i)
arr6.push(inver[b64.charAt(i)]);
i = b64.length & 3;
if (i) i = 4 - i;
i = i + b64.length;
arr6.byteLength = 3 * i / 4 - lenMod;
return arr6;
}
function base64To8(b64) {
return base6To8(base64To6(b64));
}
// base16
function base8To16(arr8) {
var i, arr16 = [];
for (i = 0; i < arr8.length; i = i + 2)
arr16.push((arr8[i] << 8) + arr8[i + 1]);
return arr16;
}
function base16To8(arr16) {
var i, arr8 = [];
for (i = 0; i < arr16.length; ++i)
arr8.push(arr16[i] >>> 8, arr16[i] & 255);
return arr8;
}
function base6To16(arr6) {
return base8To16(base6To8(arr6));
}
function base16To6(arr16) {
return base8To6(base16To8(arr16));
}
function base16To64(arr16) {
return base8To64(base16To8(arr16));
}
function base64To16(b64) {
return base8To16(base64To8(b64));
}
// from UTF8 to X
function utf8To8(str) {
var arr8 = [], i;
for (i = 0; i < str.length; ++i)
arr8.push(str.charCodeAt(i) & 255);
return arr8;
}
function utf8To6(str) {
return base8To6(utf8To8(str));
}
function utf8To16(str) {
return base8To16(utf8To8(str));
}
function utf8To64(str) {
return base8To64(utf8To8(str));
}
// from X to UTF8
function utf8From8(arr8) {
var utf8arr = [];
for (i = 0; i < arr8.length; ++i)
utf8arr.push(arr8[i]);
return String.fromCharCode.apply(String, utf8arr);
}
function utf8From6(arr6) {
return utf8From8(base6To8(arr6));
}
function utf8From16(arr16) {
return utf8From8(base16To8(arr16));
}
function utf8From64(b64) {
return utf8From8(base64To8(b64));
}
// from UTF16 to X
function utf16To16(str) {
var arr16 = [], i, c;
for (i = 0; i < str.length; ++i) {
c = str.charCodeAt(i) & 65535;
arr16.push(((c & 255) << 8) + (c >>> 8));
}
return arr16;
}
function utf16To8(str) {
return base16To8(utf16To16(str));
}
function utf16To6(str) {
return base16To6(utf16To16(str));
}
function utf16To64(str) {
return base16To64(utf16To16(str));
}
// from X to UTF16
function utf16From16(arr16) {
var utf16arr = [];
for (i = 0; i < arr16.length; ++i)
utf16arr.push(((arr16[i] & 255) << 8) + (arr16[i] >>> 8));
return String.fromCharCode.apply(String, utf16arr);
}
function utf16From8(arr8) {
return utf16From16(base8To16(arr8));
}
function utf16From6(arr6) {
return utf16From16(base6To16(arr6));
}
function utf16From64(b64) {
return utf16From16(base64To16(b64));
}
return {
base6: {
to8: base6To8,
to16: base6To16,
to64: base6To64,
},
base8: {
to6: base8To6,
to16: base8To16,
to64: base8To64
},
base16: {
to6: base16To6,
to8: base16To8,
to64: base16To64
},
base64: {
to6: base64To6,
to8: base64To8,
to16: base64To16
},
utf8: {
to8: utf8To8,
to6: utf8To6,
to16: utf8To16,
to64: utf8To64,
from8: utf8From8,
from6: utf8From6,
from16: utf8From16,
from64: utf8From64
},
utf16: {
to8: utf16To8,
to6: utf16To6,
to16: utf16To16,
to64: utf16To64,
from8: utf16From8,
from6: utf16From6,
from16: utf16From16,
from64: utf16From64
}
};
}());
An example usage
Conv86.utf16.from64(
Conv86.utf16.to64('New-Item -Path "C:\\" -Name "Test" -ItemType Directory')
// "TgBlAHcALQBJAHQAZQBtACAALQBQAGEAdABoACAAIgBDADoAXAAiACAALQBOAGEAbQBlACAAIgBUAGUAcwB0ACIAIAAtAEkAdABlAG0AVAB5AHAAZQAgAEQAaQByAGUAYwB0AG8AcgB5AA=="
); // "New-Item -Path "C:\" -Name "Test" -ItemType Directory"
If you construct a Blob to have the encoding you want, you can then make use of FileReader's readAsDataURL to build your desired output.
var cmd = 'New-Item -Path "C:\\" -Name "Test" -ItemType Directory',
pad = new Uint8Array(1), // to help change to UTF-16 (?)
ar = [],
i,
blob,
fr = new FileReader();
fr.onload = function () {
var i = this.result.indexOf(','); // trim off starting dataURI part
console.log(this.result.slice(i + 1));
};
for (i = 0; i < cmd.length; ++i) ar.push(cmd.charAt(i)), ar.push(pad);
blob = new Blob(ar); // now contains the bytes you want
fr.readAsDataURL(blob); // async warning!
Will give you your desired
TgBlAHcALQBJAHQAZQBtACAALQBQAGEAdABoACAAIgBDADoAXAAiACAALQBOAGEAbQBlACAAIgBUAGUAcwB0ACIAIAAtAEkAdABlAG0AVAB5AHAAZQAgAEQAaQByAGUAYwB0AG8AcgB5AA==

Categories

Resources