JSON.stringify or how to serialize binary data as base64 encoded JSON?

Question

I have a Javascript object which will consists of a non-cyclic object hierarchy with parameters and child objects. Some of these objects may hold binary data loaded from files or received via XHRs (not defined yet if Blob, ArrayBuffer or something else).

Normally I would use JSON.stringify() to serialize it as JSON but how can I then specify that binary data will be base64 encoded?

What binary data object (Blob, ArrayBuffer,...) would you recommend me then?

EDIT: Other data formats than plain JSON is not an option.

Answer 1

For blobs it makes more sense to convert the Blobs in the object to base64 beforehand and then stringify the object. This is because there is no reliable way to synchronously convert a blob to base64.

const blobToBase64 = (blob) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function () {
      resolve(reader.result);
    };
  });
};

(async () => {
  const b64 = await blobToBase64(blob);
  const jsonString = JSON.stringify({blob: b64});
  console.log(jsonString);
})();

Getting a blob from parsed JSON is then as simple as

const parsed = JSON.parse(jsonString);
const blob = await fetch(parsed.blob).then(res => res.blob());
console.log(blob);