如何在 React 中使用 css 过滤器下载图像

Question

嗨，我正在尝试使用 react 和 css 制作照片滤镜编辑器

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

有什么建议吗？ 谢谢

Answer 1

我解决了它只是使用 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()}/>