Problem with generating pixel representation of image upload in Adobe XD

Adobe XD UXP Plugin API
43

@stavros Don’t get mad if you don’t get help. The Adobe folks here are helpful but busy, and others try to help but are also completely consumed with our own work, and generally can only help if your question is something they’ve already encountered and can answer fairly simply.

I agree, though, that there should be a simple way to get the bits from an ImageFill as an arrayBuffer (just like there should be a way to turn arrayBuffers into an ImageFill without going through base64 encoding/decoding), with enough information to interpret the arrayBuffer structure.

1 Like
44

Sorry I overreacted. I’m under some pressure to release this plugin and shouldn’t have responded that way. I’m thankful for your help!

45

No problem–just didn’t want you to think people aren’t trying…

XD extensibility is pretty young still, and there are lots of missing pieces. I’d give Adobe time, though–they’re moving very quickly in all the right directions.

1 Like
46

Yes people are trying. I just somehow had the impression I was being ignored. It’s rather that people are busy themselves.

1 Like
47

Apologies for the delay, @Stavros… the same Adobe people who participate in this forum are the same people building XD and UXP, so there’s not always time in our day to craft a response. Apologies, though, that you felt ignored – that’s certainly not the intent!

For working with the actual pixels – there’s no easy way, unfortunately. IIRC, plugins that have done that will use an npm package that can parse the PNG or JPG file format and then operate on the pixels that way. You might try this one: https://www.npmjs.com/package/pngparse

We’re working on improving this in upcoming releases, but for now, the easy answer is that there is no easy answer.

1 Like
48

@stevekwak I somehow run into the error :

const arraybuffer = await erg[0].outputFile.read({ format
: require('uxp').storage.formats.binary});
                        ^
Plugin SyntaxError: await is only valid in async function

Am I missing something ? Every method has the await keyword in.

49

await is not valid in top-level code or functions not marked as async. JavaScript is weird this way.

Make sure your function is marked with async:

async function doThing() {
    // can safely use await
    const arraybuffer = await ...;
}

Or, if you’re at the top level of your code, use promise form instead:

erg[0].outputfile.read({}).then(
    data => { /* continue working with data */ }
).catch( err => console.error(err) );
50

Same. I have an ArrayBuffer from image loaded locally and need to get the pixel representation. I need to get an ImageData like object:

ImageData.data Read only

Is a Uint8ClampedArray representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (inclusive).

51

Recent Chromes (V8) support top-level await, so I suppose that’ll trickle down to XD’s V8.

1 Like
52

Hi Kerrie

regards to your post

20210723_070756
20210723_070756720×463 125 KB

We are developing plugin for XD, we used server side process to solve the issue with caves as you mentioned here. It is slow and we are looking into other options without server side.
Has your team solved the issue that you mentioned is in your backlog?

Any hint or idea that applying filter can be done local within Adobe is appreciated.

53

We’re working on an Imaging API that will make this much easier, but for this type of functionality, it’s likely we won’t see it in XD until 2022 (earlier rather than later, I hope). For now, slow is the only path. :frowning:

2 Likes