嗨,我正在尝试使用 React 和 CSS 制作照片过滤器编辑器,我在照片上添加 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>
)
有什么建议吗?谢谢
我解决了它只是使用 htmlToImage 包
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()}/>