Select frame plugin

Hi everyone,
I’m working on a plugin, and when I select an art board, I want to make its image, display it in my plugin UI, and send that image data to the API.

I have data in the form of a Uint8Array. It needs to be converted to an image, which I found is possible if it’s in base64.

I have installed multiple libraries through npm e.g npm install uint8-to-base64 but it fails to load when I do import { base64_arraybuffer } from 'uint8-to-base64' it always says Cannot find module 'base64-arraybuffer-converter' or its corresponding type declarations.ts(2307)

import { base64_arraybuffer } from 'uint8-to-base64';

figma.ui.onmessage = async (msg) => {
    const selectedArtboard = figma.currentPage.selection[0];

    // Export the artboard as an image buffer.
    const imageBuffer = await selectedArtboard.exportAsync({ format: 'PNG' });

    // Store the image buffer in a variable.
    const image = imageBuffer;


    const ReimageBuffer = new Uint8Array(image)
    var dataURL = base64_arraybuffer.ab_2_base64(ReimageBuffer)



While the library is installed and it’s there already, I tried looking up on internet as well
some suggested I should ammed tsconfig.json and add "paths": {."uint8-to-base64":["./node_modules/uint8-base64"] } should solve it but doesn’t help.

Any help in the direction, it feels like i’m close to get this done if I have the image converted into base64 I can display that in the image tag.

Thanks, please do let me know If I have missed anything to mention or If you need any further information.

Thanks again.

1 Like

Thanks for the reply, I’m unable to get Uint8Array to even be base64, once I get to the base64 string, I can manipulate it but main challenge is the conversion to base64

Did you use the method I linked above?

1 Like