okay, so i did it like this and it’s outputting
if (flag && renderedEntries) {
console.log(flag, renderedEntries);
const bufferImages = [];
entries.forEach(async image => {
bufferImages.push(await image.read({ format: require('uxp').storage.formats.binary }));
console.log(base64ArrayBuffer(bufferImages));
});
}
};
Output:
AA==
AAA=
AAAA
AAAAAA==
AAAAAAA=
AAAAAAAA
AAAAAAAAAA==
AAAAAAAAAAA=
AAAAAAAAAAAA
Is this how it should be?
P.S you are crazy good lol
that seems a bit too simple for base64 images. Another way is trying to send arraybuffer to your server and check the arraybuffer there.
You might also see https://github.com/dankogai/js-base64 for a popular base64 library you could use in an XD plugin.
(5+M weekly downloads! though I suppose most of those are npm installs.)
Hey Steve, I created the rendition as in the create rendition example and it worked perfectly fine.
My question is how i access the rendition object now which contains the read method?
const data = await rendition.read({ format: require(“uxp”).storage.formats.binary });
The results variable created by the createRenditions method only creates the file…
try {
const results = await application.createRenditions(renditionOptions).then(results => {
// How to access the rendition now?
// results[0] has only the output file
}).catch(error => {
console.log(error);
})
// Create and show a modal dialog displaying info about the results
const dialog = createDialog(results[0].outputFile.nativePath);
return dialog.showModal();
} catch (err) {
// Exit if there's an error rendering.
console.log("Error ", err);
return console.log("Something went wrong. Let the user know.");
}
}
I got it working like this Steve, thanks a ton for your help.
const images = [];
if (flag && renderedEntries) {
const entries = await folder.getEntries();
entries.forEach(entry => images.push(entry));
}
const data = new FormData();
// data.append('name', 'test value here');
data.append('image', images[0], 'file.png');
uploadImage(data);
// Display the key/value pairs
for (var pair of data.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
};
const uploadImage = image => {
Axios.post(`${devApiURI}/upload`, image, {
headers: { 'Content-Type': 'multipart/form-data' },
}).then(res => {
console.log(res.data);
});
};
Thank you for sharing!
The file of the rendition itself has the read method.
In your code:
results[0].outputFile has the read method. so It would be like:
const arraybuffer = results[0].outputFile.read({ format: require(“uxp”).storage.formats.binary });
could you post an example that uses the js-base64 library?
I tried it this way. Creating the rendition and everything works but not creating the arraybuffer. It’s empty.
Is there an update coming out which allows to read out the pixel values of an image easier?
That seems quite complex just for getting some pixel values. An operation which I think many Adobe XD plugins will need one day.
if you console.log it, it will look like an empty object {}, but it’s not actually an empty object. Try converting it to base64 and log it out, or send it to your server and see.
We’re aware of the difficulties in generating pixel representations; we’re working on improvements here (unfortunately I can’t provide a timeline yet).
But for now, this is what we have to work with, for better or worse.
Turns out that was a bad recommendation. I ended up using the npm library base64-arraybuffer, which works great.
I posted an example at Please include base-64 utilities.
Can you give an example of how to iterate through image pixels with the base64 encoded string? Everything works fine for me until the point were I have to use the Base64 string to get out the single pixel values. Creating the image rendition and converting encoding it to Base64 worked!
Can you please clarify what you mean by “get out the single pixel values”?
I need a pixel representation of the selected image. My plugin needs to know every rgb value of any pixel in the image in order to do its processing. Since one can’t get this representation out of the ImageFill object your API is offering I followed the steps in this channel and created an Image Rendition and with outputFile.read I generated an arraybuffer. After that I used a base64 library to convert it to base64 as you suggested. The problem I have now is how to get the single pixel values? I don’t really get the connection between base64 and the image pixel representation 
Shall I add more details to my problem?
I am not totally aware of how there is a connection either. I re-read the thread and it seems like this method was suggested when you asked about getting the arraybuffer. Unfortunately, we don’t have any direct API that produces rgb values of an image. I was assuming you would be able to get what you need if arraybuffer is provided.
Does anyone else have any suggestions here?
@stevekwak Your colleague kerrishotts made the initial suggestion with the ArrayBuffer. @kerrishotts Is there a way to access the image as pixel representation and do some analysis with for instance the rgb distribution? Using the Arraybuffer ? My Plugin is generating a Color Palette with the most prominent colours in an image and I need the values of every single pixel.
The problem is I don’t get the connection between arraybuffer and pixel representation.
Since no one seems to care anymore I will look for other Platforms to integrate my plugin. Thanks for the former responses though. That counts also for all my planned future plugins. I will try at Figma…
Would a library like https://www.npmjs.com/package/pngjs help?
The ArrayBuffer will contain binary data encoded in the particular format you exported the rendition to (e.g. JPG, PNG) - so you need to find a suitable JS library to extract the info from that format. Seems like the library above can give you r,g,b,a for each pixel value of a PNG, provided you can require and run it in the XD environment.