getImageByHash not returning the updated image in the frame

Ask the community
1

I’m creating an image in Figma document via the plugin and will edit the image in Figma as per the requirement. Once I done editing(updating opacity/contrast) I want to pass the updated image back to the plugin. For that using getImageByHash api to retrieve the image bytes. But it’s not returning the edited image and instead of that returning original image. Code snippets below,

Creating Image

fetch(`http://localhost:3000/api/getImage/${id}`)
    .then(res => res.arrayBuffer()) // Gets the response and returns it as a blob
    .then(async blob => {
      const uint8 = new Uint8Array(blob);
      const node = figma.createFrame()
      const image = figma.createImage(uint8);
      const { width, height } = await image.getSizeAsync();
      node.resize(width, height)
      // Set the fill on the node
      node.fills = [
        {
          type: 'IMAGE',
          imageHash: image.hash,
          scaleMode: 'FILL'
        }
      ]
      // figma.closePlugin()
    }).catch((error: any) => {
      console.log(error, '>>>image error')
    })

Retrieving Image

for (const node of figma.currentPage.selection) {
    for (const paint of node.fills) {
      if (paint.type === 'IMAGE') {
        // Get the (encoded) bytes for this image.
        const image = figma.getImageByHash(paint.imageHash)
        const bytes = await image.getBytesAsync(); // Bytes returning original one
        figma.ui.postMessage({ type: 'upload', image: bytes }); // Sending bytes to the plugin.
      }
    }
  }
2

How and when do you run the get image function? Are you listening to the documentchange event?

Have you tried using exportAsync method to get a new image?

3

Im having onClick function in html which will trigger the function to get selected frame.

exportAsync resolved my issue.

const getSelected = async () => {
  for (const node of figma.currentPage.selection) {
    // @ts-ignore
    for (const paint of node.fills) {
      if (paint.type === 'IMAGE') {
        // Get the (encoded) bytes for this image.
        const bytes = await node.exportAsync();
        figma.ui.postMessage({ type: 'upload', image: bytes });
      }
    }
  }

}