How can I access a Sprite animation frame as an image or base64 from JavaScript in Construct 3?

Hi,

I am working in Construct 3 with JavaScript and jsPDF to generate a PDF from my project.

I have a Sprite with many animation frames, where each frame represents a graphic symbol. In the project I normally use this Sprite by changing its animation frame, for example:

const key = runtime.objects.KEY_CHART.getFirstInstance();

key.animationFrame = frameIndex;

My question is:

Is there any way, from JavaScript, to directly read the image of the current Sprite frame and convert it into something usable, such as an ImageBitmap, Blob, base64, dataURL, or similar?

The idea would be to use that frame, draw it to a canvas, recolor it, and then insert it into a PDF using jsPDF.

At the moment, I solved it by using an external 768x768 PNG atlas, with 64x64 symbols. I load it with fetch() and createImageBitmap(), then crop each symbol with OffscreenCanvas and insert it into the PDF.

This works, but it means I need to keep the symbols duplicated:

once as Sprite frames inside Construct 3;

and again as an external PNG atlas for the PDF.

I would like to know if there is a more direct way to use the existing Sprite frames from Construct 3, to avoid duplicated resources and reduce project size/maintenance effort.

Thanks.

There isn't currently a way to do that from code, but we have an internal capability to do it which is easy to expose to code. So the next beta release will have an ImageInfo method toCanvas() which will let you extract the image off its spritesheet to a canvas (either HTMLCanvasElement in DOM mode or OffscreenCanvas in worker mode).