Skip to main content
Solved

getImageByHash not returning the updated image in the frame


srigar_sri

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.
      }
    }
  }

Best answer by srigar_sri

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 });
      }
    }
  }

}
View original
This topic has been closed for replies.

tank666

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?


srigar_sri

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 });
      }
    }
  }

}

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings