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.
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.
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
I’m using the ES6 style import, but
const base64 = require('base64-arraybuffer')
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.