chore: download image by one click (#94)

chore: download image by clicking
This commit is contained in:
boojack
2022-06-28 21:56:06 +08:00
committed by GitHub
parent 011fcc7dd4
commit 8cb9675965
4 changed files with 34 additions and 10 deletions

View File

@ -1,4 +1,5 @@
import { showDialog } from "./Dialog";
import * as utils from "../helpers/utils";
import "../less/preview-image-dialog.less";
interface Props extends DialogProps {
@ -10,12 +11,23 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
destroy();
};
const handleDownloadBtnClick = () => {
const a = document.createElement("a");
a.href = imgUrl;
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.click();
};
return (
<>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
<img className="icon-img" src="/icons/close.svg" />
</button>
<div className="btns-container">
<button className="btn" onClick={handleCloseBtnClick}>
<img className="icon-img" src="/icons/close.svg" />
</button>
<button className="btn" onClick={handleDownloadBtnClick}>
<img className="icon-img" src="/icons/download.svg" />
</button>
</div>
<div className="img-container">
<img src={imgUrl} crossOrigin="anonymous" />
</div>