diff --git a/src/actions/actionClipboard.tsx b/src/actions/actionClipboard.tsx index 93dc36baf..13dd6bf23 100644 --- a/src/actions/actionClipboard.tsx +++ b/src/actions/actionClipboard.tsx @@ -50,7 +50,6 @@ export const actionCopyAsSvg = register({ ? selectedElements : getNonDeletedElements(elements), appState, - app.canvas, appState, ); return { @@ -89,7 +88,6 @@ export const actionCopyAsPng = register({ ? selectedElements : getNonDeletedElements(elements), appState, - app.canvas, appState, ); return { diff --git a/src/clipboard.ts b/src/clipboard.ts index 82218de36..5728554d6 100644 --- a/src/clipboard.ts +++ b/src/clipboard.ts @@ -6,7 +6,6 @@ import { getSelectedElements } from "./scene"; import { AppState } from "./types"; import { SVG_EXPORT_TAG } from "./scene/export"; import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts"; -import { canvasToBlob } from "./data/blob"; import { EXPORT_DATA_TYPES } from "./constants"; type ElementsClipboard = { @@ -152,8 +151,7 @@ export const parseClipboard = async ( } }; -export const copyCanvasToClipboardAsPng = async (canvas: HTMLCanvasElement) => { - const blob = await canvasToBlob(canvas); +export const copyBlobToClipboardAsPng = async (blob: Blob) => { await navigator.clipboard.write([ new window.ClipboardItem({ "image/png": blob }), ]); diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 65e5e5b68..c33cbb086 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -407,20 +407,18 @@ const LayerUI = ({ exportedElements, scale, ) => { - if (canvas) { - await exportCanvas(type, exportedElements, appState, canvas, { - exportBackground: appState.exportBackground, - name: appState.name, - viewBackgroundColor: appState.viewBackgroundColor, - scale, - shouldAddWatermark: appState.shouldAddWatermark, - }) - .catch(muteFSAbortError) - .catch((error) => { - console.error(error); - setAppState({ errorMessage: error.message }); - }); - } + await exportCanvas(type, exportedElements, appState, { + exportBackground: appState.exportBackground, + name: appState.name, + viewBackgroundColor: appState.viewBackgroundColor, + scale, + shouldAddWatermark: appState.shouldAddWatermark, + }) + .catch(muteFSAbortError) + .catch((error) => { + console.error(error); + setAppState({ errorMessage: error.message }); + }); }; return ( diff --git a/src/data/index.ts b/src/data/index.ts index 3f4012de6..fce8d9bd2 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -1,6 +1,6 @@ import { fileSave } from "browser-fs-access"; import { - copyCanvasToClipboardAsPng, + copyBlobToClipboardAsPng, copyTextToSystemClipboard, } from "../clipboard"; import { NonDeletedExcalidrawElement } from "../element/types"; @@ -18,7 +18,6 @@ export const exportCanvas = async ( type: ExportType, elements: readonly NonDeletedExcalidrawElement[], appState: AppState, - canvas: HTMLCanvasElement, { exportBackground, exportPadding = 10, @@ -76,10 +75,11 @@ export const exportCanvas = async ( }); tempCanvas.style.display = "none"; document.body.appendChild(tempCanvas); + let blob = await canvasToBlob(tempCanvas); + tempCanvas.remove(); if (type === "png") { const fileName = `${name}.png`; - let blob = await canvasToBlob(tempCanvas); if (appState.exportEmbedScene) { blob = await ( await import(/* webpackChunkName: "image" */ "./image") @@ -95,7 +95,7 @@ export const exportCanvas = async ( }); } else if (type === "clipboard") { try { - await copyCanvasToClipboardAsPng(tempCanvas); + await copyBlobToClipboardAsPng(blob); } catch (error) { if (error.name === "CANVAS_POSSIBLY_TOO_BIG") { throw error; @@ -103,9 +103,4 @@ export const exportCanvas = async ( throw new Error(t("alerts.couldNotCopyToClipboard")); } } - - // clean up the DOM - if (tempCanvas !== canvas) { - tempCanvas.remove(); - } };