# Please include base-64 utilities

**URL:** <https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395>\
**Category:** UXP Plugin API\
**Tags:** api-feedback\
**Created:** [November 14, 2018, 1:43pm UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395 "2018-11-14T13:43:15Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [November 14, 2018, 1:43pm UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/1 "2018-11-14T13:43:15Z")

</div>

Since ImageFill takes a data: URI with base-64 encoded data, and what’s gotten from the web with a fetch is usually binary data, it’d be great if Xd provided utilities to convert binary to and from base-64.

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [November 14, 2018, 3:52pm UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/2 "2018-11-14T15:52:25Z")

</div>

Thanks for the request. For now, please use a utility function. Example: [https://github.com/AdobeXD/plugin-samples/blob/master/how-to-make-network-requests/main.js](https://github.com/AdobeXD/plugin-samples/blob/master/how-to-make-network-requests/main.js)

---

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [May 25, 2019, 2:25am UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/3 "2019-05-25T02:25:47Z")

</div>

Thought I’d let you know (a bit later!) that using the npm module base64-arraybuffer works great.

The code

```
import base64 from 'base64-arraybuffer'

const binary = await fetchBinary(uri)
const imgBase64 = base64.encode(binary)
const imgFill = new ImageFill('data:image/png;base64,' + imgBase64)

```

seems to work great (using the fetchBinary utility from the plugin-samples). Not bad! 3 lines of code to fetch an image and turn it into an ImageFill.

---

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [May 25, 2019, 2:41pm UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/4 "2019-05-25T14:41:29Z")

</div>

But here’s a strong vote for a built-in fast (C++) base64 implementation that handles both string and arraybuffer encoding/decoding.

(You probably already have much of that built-in, handling the “data:” URIs, so you could expose it to JS.)

---

<div class="post-metadata">

**Author:** ![Stavros](https://avatars.discourse-cdn.com/v4/letter/s/51bf81/32.png) [@Stavros](https://forums.creativeclouddeveloper.com/u/Stavros)\
**Post date:** [June 6, 2019, 11:23am UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/5 "2019-06-06T11:23:27Z")

</div>

Hey crypland. That way of importing the base64-arraybuffer did not work for me. Can you give a little more detail on how you did it? Thanks 😃

---

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [June 6, 2019, 11:38am UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/6 "2019-06-06T11:38:48Z")

</div>

I’m using the ES6 style import, but

```
const base64 = require('base64-arraybuffer')

```

or maybe

```
const base64 = require('base64-arraybuffer').default

```

should work as an alternative.

---

<div class="post-metadata">

**Author:** ![Stavros](https://avatars.discourse-cdn.com/v4/letter/s/51bf81/32.png) [@Stavros](https://forums.creativeclouddeveloper.com/u/Stavros)\
**Post date:** [June 6, 2019, 12:12pm UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/7 "2019-06-06T12:12:33Z")

</div>

Ok thank you I will try! Can you post the imgBase64 output?

---

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [June 6, 2019, 1:44pm UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/8 "2019-06-06T13:44:52Z")

</div>

Not sure what you mean.

---

<div class="post-metadata">

**Author:** ![samodostal](https://avatars.discourse-cdn.com/v4/letter/s/aca169/32.png) [@samodostal](https://forums.creativeclouddeveloper.com/u/samodostal)\
**Post date:** [June 27, 2019, 7:03am UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/9 "2019-06-27T07:03:23Z")

</div>

Found this on Git:

> <https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js>

It is working without any outer plugins.

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [April 27, 2020, 9:24am UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/10 "2020-04-27T09:24:14Z")

</div>

These alternatives don’t work for me. I still need synchronous image data to base 64 method.

```
const bitmapData = sceneNode.toBitmapData();
const base64 = bitmapData.encode("png");
console.log(base64); // "data:image/png;base64,..."
```

---

<div class="post-metadata">

**Author:** ![Rados](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@Rados](https://forums.creativeclouddeveloper.com/u/Rados)\
**Post date:** [November 30, 2020, 12:19am UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/11 "2020-11-30T00:19:01Z")

</div>

```auto
function strToUTF8Base64(str) {
  function decodeSurrogatePair(hi, lo) {
    var resultChar = 0x010000;
    resultChar += lo - 0xdc00;
    resultChar += (hi - 0xd800) << 10;
    return resultChar;
  }

  var bytes = [0, 0, 0];
  var byteIndex = 0;
  var result = [];

  function output(s) {
    result.push(s);
  }

  function emitBase64() {
    var digits =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZ" +
      "abcdefghijklmnopqrstuvwxyz" +
      "0123456789+/";

    function toDigit(value) {
      return digits[value];
    }

    // --Byte 0-- --Byte 1-- --Byte 2--
    // 1111 1122 2222 3333 3344 4444

    var d1 = toDigit(bytes[0] >> 2);
    var d2 = toDigit(((bytes[0] & 0x03) << 4) | (bytes[1] >> 4));
    var d3 = toDigit(((bytes[1] & 0x0f) << 2) | (bytes[2] >> 6));
    var d4 = toDigit(bytes[2] & 0x3f);

    if (byteIndex === 1) {
      output(d1 + d2 + "==");
    } else if (byteIndex === 2) {
      output(d1 + d2 + d3 + "=");
    } else {
      output(d1 + d2 + d3 + d4);
    }
  }

  function emit(chr) {
    bytes[byteIndex++] = chr;
    if (byteIndex == 3) {
      emitBase64();
      bytes[0] = 0;
      bytes[1] = 0;
      bytes[2] = 0;
      byteIndex = 0;
    }
  }

  function emitLast() {
    if (byteIndex > 0) {
      emitBase64();
    }
  }

  // Converts the string to UTF8:

  var i, chr;
  var hi, lo;
  for (i = 0; i < str.length; i++) {
    chr = str.charCodeAt(i);

    // Test and decode surrogate pairs in the string
    if (chr >= 0xd800 && chr <= 0xdbff) {
      hi = chr;
      lo = str.charCodeAt(i + 1);
      if (lo >= 0xdc00 && lo <= 0xdfff) {
        chr = decodeSurrogatePair(hi, lo);
        i++;
      }
    }

    // Encode the character as UTF-8.
    if (chr < 0x80) {
      emit(chr);
    } else if (chr < 0x0800) {
      emit((chr >> 6) | 0xc0);
      emit(((chr >> 0) & 0x3f) | 0x80);
    } else if (chr < 0x10000) {
      emit((chr >> 12) | 0xe0);
      emit(((chr >> 6) & 0x3f) | 0x80);
      emit(((chr >> 0) & 0x3f) | 0x80);
    } else if (chr < 0x110000) {
      emit((chr >> 18) | 0xf0);
      emit(((chr >> 12) & 0x3f) | 0x80);
      emit(((chr >> 6) & 0x3f) | 0x80);
      emit(((chr >> 0) & 0x3f) | 0x80);
    }
  }

  emitLast();

  return result.join("");
}

```

Taken from this site [https://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript](http://forums.creativeclouddeveloper.com/t/a-question-about-the-combination-of-typescript-and-react-in-plugins/1854)

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [November 30, 2020, 5:34pm UTC](https://forums.creativeclouddeveloper.com/t/please-include-base-64-utilities/395/12 "2020-11-30T17:34:14Z")

</div>

There’s also this:

> <https://github.com/velara3/xd-examples/blob/master/statistics/log.js#L2085>