How can i download the image?

[beurmuz]

Hi! I'm a beginner developer who doesn't know much about React.
I'm using the library you made for me very useful but I'm leaving a message because i have a question.

I want to save the completed canvas in image(.png) format.
So I used the imageExportHandler function, but it didn't download.
I made a function so that it looks like this when I click the button, but can I know what the problem is?

  const [dataURI, setDataURI] = useState('');
  const [exportImageType, setexportImageType] = useState('png');

  ...

  const imageExportHandler = async () => {
    const exportImage = canvasRef.current?.exportImage;

    if (exportImage) {
      const exportedDataURI = await exportImage(exportImageType);
      setDataURI(exportedDataURI);
    }
    const downloadImage = document.createElement('a');
    downloadImage.href = dataURI;
    downloadImage.download = 'paint_image';
    downloadImage.click();
  };

  ...
  return (
    ...
    <FontAwesomeIcon
          className={styles.icon_share}
          icon={faDownload}
          onClick={() => imageExportHandler()}
    />
    ...
  )

How can I download the image from PC and mobile?
the React version is "^18.2.0". Thank you :) !

[vinothpandian]

Hey @beurmuz,

Your React code looks good! The only issue with your code is that you have set the state using setDataURI and immediately accessed the dataURI state value. Setting state in react is an asynchronous and batched operation so you can't immediately access the value that you have set. So instead you can use the exportedDataURI variable to download the image. I made an example in the link below, you can use that. Let me know if you any more info!

https://codesandbox.io/s/nifty-gauss-zk8xtt?file=/src/App.js

[beurmuz]

Amazing.. ✨ Thanks a lot! Your code was very helpful. I didn't know I had to write asynchronous code. Thanks to you, I solved the problem. Then have a good day!