What is the code to convert data to base64 in Javascript when it is not a string?

Question

What is the code to convert data to base64 in Javascript when it is not a string?

I am in the process of transferring functionality from an Objective-C iPhone application to a JavaScript iPhone application (using Appcelerator Titanium). In my Objective-C code, I have an NSData object that represents a specific token:

//NSData object shown when printed to the console:
<0cd9f571 b0e66e6d ca410d12 f67a404a 7e64b9b5 d2483fd9 63a9267b 1c7609e2>

This token is not just a string, it's actually an NSData object which serves as an object-oriented wrapper for a byte buffer. When I encode this object using base64, I obtain the following result:

//base64 encoded representation of the NSData object
DNn1cbDmbm3KQQ0S9npASn5kubXSSD/ZY6kmexx2CeI=

Now, in my JavaScript implementation, I have a string version of the same token which appears like this:

//string equivalent of the token in my JavaScript implementation
0cd9f571b0e66e6dca410d12f67a404a7e64b9b5d2483fd963a9267b1c7609e2

When I encode this string object using base64 in JavaScript, the output is as follows:

//base64 encoded token (as a string) in JavaScript
MGNkOWY1NzFiMGU2NmU2ZGNhNDEwZDEyZjY3YTQwNGE3ZTY0YjliNWQyNDgzZmQ5NjNhOTI2N2IxYzc2MDllMg==

The challenge arises because the web service I need to send this token to does not accept the base64 encoded string, but rather requires the base64 encoded data! How can I achieve this conversion in JavaScript?

javascript iphone encoding base64

Answer 1

Answer №1

To fix the issue, you need to convert the hexadecimal string before encoding it in base64. Here is how you can do this in JavaScript:

if (!Array.prototype.map) {
    Array.prototype.map = function(f) {
        var result = [];
        for (var i=0; i < this.length; ++i) {
            result[i] = f(this[i], i);
        }
        return result;
    }
}
String.prototype.b16decode = function() {
    return this.match(/../g).map(
        function (x) {
            return String.fromCharCode(parseInt(x, 16));
        }
    ).join('');
}

For instance, when running

btoa('0cd9f571b0e66e6dca410d12f67a404a7e64b9b5d2483fd963a9267b1c7609e2'.b16decode())

(where btoa is a base64 encoding function available in some browsers), the result will be

"DNn1cbDmbm3KQQ0S9npASn5kubXSSD/ZY6kmexx2CeI="

Answer 2

To fix the issue, you need to convert the hexadecimal string before encoding it in base64. Here is how you can do this in JavaScript:

if (!Array.prototype.map) {
    Array.prototype.map = function(f) {
        var result = [];
        for (var i=0; i < this.length; ++i) {
            result[i] = f(this[i], i);
        }
        return result;
    }
}
String.prototype.b16decode = function() {
    return this.match(/../g).map(
        function (x) {
            return String.fromCharCode(parseInt(x, 16));
        }
    ).join('');
}

For instance, when running

btoa('0cd9f571b0e66e6dca410d12f67a404a7e64b9b5d2483fd963a9267b1c7609e2'.b16decode())

(where btoa is a base64 encoding function available in some browsers), the result will be

"DNn1cbDmbm3KQQ0S9npASn5kubXSSD/ZY6kmexx2CeI="

Answer 3

Answer №2

First, it is important to interpret the original hexadecimal string as a series of integers, rather than characters. You can refer to How to convert decimal to hex in JavaScript? for guidance on this process.

Next, you will need to adapt an existing base64 JavaScript algorithm to work with these integers instead of using charCodeAt. Resources like and http://www.codeproject.com/KB/cs/base64encoder.aspx offer valuable insights into achieving this transformation.

While the latter example provided relates to C#, it should be feasible to translate the logic into JavaScript successfully.

If time permits, I may attempt to develop the necessary code at a later stage.

Answer 4

First, it is important to interpret the original hexadecimal string as a series of integers, rather than characters. You can refer to How to convert decimal to hex in JavaScript? for guidance on this process.

Next, you will need to adapt an existing base64 JavaScript algorithm to work with these integers instead of using charCodeAt. Resources like and http://www.codeproject.com/KB/cs/base64encoder.aspx offer valuable insights into achieving this transformation.

While the latter example provided relates to C#, it should be feasible to translate the logic into JavaScript successfully.

If time permits, I may attempt to develop the necessary code at a later stage.

Answer 5

Answer №3

Look up the toDataUrl() method

Answer 6

Look up the toDataUrl() method

What is the code to convert data to base64 in Javascript when it is not a string?

Answer №1

Answer №2

Answer №3

Similar questions

Executing a Python script asynchronously from a Node.js environment

Building a contact form in Angular and sending emails with Nodemailer

When using node.js express, the req.body object does not yield any results

Engaging in payment processing

What is the best way to control the overflow length and display only a specific amount of content at once?

The scrolling function halts as soon as the element that was middle-clicked is deleted from the

The webpack vue-loader throws an error message stating "unexpected token {" when processing a single-page .vue component

Can TypeScript and JavaScript be integrated into a single React application?

How can we incorporate SaxonJS higher-order functions into the Node.js runtime, separate from JS/HTML?

Catching exceptions with jQuery Ajax

How can you retrieve the `categoryIds` key within an object that holds an array of mongodb's `ObjectId(s)` as its value?

Listening for server updates with jQuery

Creating a custom filter: How to establish seamless interaction between a script and a node application

Issue with Material UI: An invalid value was detected for the select component, even though the value is within the available options

The image fails to load when attempting to retrieve it from a local JSON file

Tips for changing the content of a td element to an input field and removing the displayed value

Is it recommended to incorporate "return" in my callback function when coding in JavaScript?

Load grid data only when the tab is clicked in ExtJS

Customizing AngularJS Scripts to Include Target Blank

Guide to updating a database using ajax and javascript in asp.net mvc without the need to refresh the page