Draw image using UXP

Photoshop UXP Plugin API
1

Hi,

I 'm currently developing a UXP plugin that generate an image in Javascript and I’m looking for a way to show my image in the panel. I try to use the canvas widget but it sound not supported by UXP. Is it correct? Should I need to write my image on disc and then reload it?

Best regards,
robin

2

Yes, Canvas is not yet supported.

How does the image generation roughly look like?

To include an image in the HTML Dom via an image source requires the image to be a file inside the plugin folder (if it’s a local file). There might however also be options to embed the image programmatically, without having it as a file. For example SVGs can be rendered by including their respective data. Another thing that comes to my mind is a base64 string, maybe this could be an option?

1 Like
3

Thank for this answer,

It is a unsigned integer 8 array. It sound the base64 string is the best option. Can I convert my data into the base64 string and print them on screen?

image

4

You can, but it will a multi-step journey that is not at all optimized at the moment. That’s changing later this year.

For now, though:

  • Convert your raw pixels into a PNG file (any of the PURE JS node array-to-png modules should work as long as they can take an array and not a file stream or the like)
  • Convert the PNG output to base64. This requires a polyfill btoa (UXP does not provide this by default).
  • Assign the result to the src of an image (or CSS property)

This shouldn’t be horridly slow, but it’s definitely not fast (as in, don’t do animation with this) and it’s definitely not where we (or anyone) would like it to be. Thankfully there some imaging APIs that are coming later this year that will help here. Until then, the above is the way.

5

Thank you for this workaround! I’ll try it.