[英]How to download image with css filters in React
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嗨,我正在尝试使用 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>
)
any advice?有什么建议吗? Thanks
谢谢
I solved it just use htmlToImage package我解决了它只是使用 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()}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.