Please include base-64 utilities

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.

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

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.

1 Like

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

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 :smiley:

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.

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

Not sure what you mean.

Found this on Git:

It is working without any outer plugins.