YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: incorrect sharing image gerneration (#1157) (#1205)

Browse Source
This commit is contained in:
CorrectRoadH
2023-02-28 22:43:42 +08:00
committed by GitHub
parent 107a2dbe90
commit eda27a60be
1 changed files with 23 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/src/components/ShareMemoDialog.tsx
View File

@ -24,7 +24,6 @@ interface Props extends DialogProps {
interface State { interface State {
memoAmount: number; memoAmount: number;
memoVisibility: string; memoVisibility: string;
generatedImgUrl: string;
} }
const ShareMemoDialog: React.FC<Props> = (props: Props) => { const ShareMemoDialog: React.FC<Props> = (props: Props) => {
@ -38,8 +37,8 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
memoAmount: 0, memoAmount: 0,
memoVisibility: propsMemo.visibility, memoVisibility: propsMemo.visibility,
generatedImgUrl: "",
}); });
const createLoadingState = useLoading(false);
const loadingState = useLoading(); const loadingState = useLoading();
const memoElRef = useRef<HTMLDivElement>(null); const memoElRef = useRef<HTMLDivElement>(null);
const memo = { const memo = {
@ -64,39 +63,31 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
}); });
}, []); }, []);
useEffect(() => {
if (loadingState.isLoading) {
return;
}
if (!memoElRef.current) {
return;
}
toImage(memoElRef.current, {
pixelRatio: window.devicePixelRatio * 2,
})
.then((url) => {
setState((state) => {
return {
...state,
generatedImgUrl: url,
};
});
})
.catch((err) => {
console.error(err);
});
}, [loadingState.isLoading]);
const handleCloseBtnClick = () => { const handleCloseBtnClick = () => {
destroy(); destroy();
}; };
const handleDownloadBtnClick = () => { const handleDownloadBtnClick = () => {
const a = document.createElement("a"); if (!memoElRef.current) {
a.href = state.generatedImgUrl; return;
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`; }
a.click();
createLoadingState.setLoading();
toImage(memoElRef.current, {
pixelRatio: window.devicePixelRatio * 2,
})
.then((url) => {
const a = document.createElement("a");
a.href = url;
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.click();
createLoadingState.setFinish();
})
.catch((err) => {
console.error(err);
});
}; };
const handleCopyLinkBtnClick = () => { const handleCopyLinkBtnClick = () => {
@ -133,7 +124,6 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">
<div className="memo-container" ref={memoElRef}> <div className="memo-container" ref={memoElRef}>
{state.generatedImgUrl !== "" && <img className="memo-shortcut-img" src={state.generatedImgUrl} />}
<span className="time-text">{memo.createdAtStr}</span> <span className="time-text">{memo.createdAtStr}</span>
<div className="memo-content-wrapper"> <div className="memo-content-wrapper">
<MemoContent content={memo.content} displayConfig={{ enableExpand: false }} /> <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
@ -176,8 +166,8 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
))} ))}
</Select> </Select>
<div className="flex flex-row justify-end items-center"> <div className="flex flex-row justify-end items-center">
<button disabled={state.generatedImgUrl === ""} className="btn-normal mr-2" onClick={handleDownloadBtnClick}> <button disabled={createLoadingState.isLoading} className="btn-normal mr-2" onClick={handleDownloadBtnClick}>
{state.generatedImgUrl === "" ? ( {createLoadingState.isLoading ? (
<Icon.Loader className="w-4 h-auto mr-1 animate-spin" /> <Icon.Loader className="w-4 h-auto mr-1 animate-spin" />
) : ( ) : (
<Icon.Download className="w-4 h-auto mr-1" /> <Icon.Download className="w-4 h-auto mr-1" />