How to download image with css filters in React

Question

Hi I'm trying to make photo filter edotor with react and css I'm adding css filters on photo and now need to download edited photo but I only managed to download just uploaded photo

     import { saveAs } from 'file-saver'
    //upload
    const [file, setFile] = useState();
  function photoChanged(e) {
    setFile(URL.createObjectURL(e.target.files[0]));
  }
  // photo download
  const downloadImage = () => {
    saveAs(`${file}`, 'image.jpg') // img url
  }
   return (
    <div className="main-image">
            <h2>Add Image:</h2>
            <button onClick={downloadImage}>Download!</button>
            <input type="file" onChange={photoChanged} />
            <img src={file} style={getImageStyle()}/> //from here I added filters as props
        </div>
   )

any advice? Thanks

Answer 1

I solved it just use htmlToImage package

 const domEl = useRef(null);
    const downloadImage = async () => {
    const dataUrl = await htmlToImage.toPng(domEl.current);

    // download image
    const link = document.createElement('a');
    link.download = 'html-to-img.png';
    link.href = dataUrl;
    link.click();
  };
   return <button onClick={downloadImage}>Download!</button>
   <img ref={domEl} src={file} style={getImageStyle()}/>