diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx index cf98934..cf4b4bd 100644 --- a/src/components/EditorHeader/ControlPanel.jsx +++ b/src/components/EditorHeader/ControlPanel.jsx @@ -43,6 +43,7 @@ import { DB, IMPORT_FROM, noteWidth, + pngExportPixelRatio, } from "../../data/constants"; import jsPDF from "jspdf"; import { useHotkeys } from "react-hotkeys-hook"; @@ -493,7 +494,9 @@ export default function ControlPanel({ })); }; const copyAsImage = () => { - toPng(document.getElementById("canvas")).then(function (dataUrl) { + toPng(document.getElementById("canvas"), { + pixelRatio: pngExportPixelRatio, + }).then(function (dataUrl) { const blob = dataURItoBlob(dataUrl); navigator.clipboard .write([new ClipboardItem({ "image/png": blob })]) @@ -996,7 +999,9 @@ export default function ControlPanel({ { name: "PNG", function: () => { - toPng(document.getElementById("canvas")).then(function (dataUrl) { + toPng(document.getElementById("canvas"), { + pixelRatio: pngExportPixelRatio, + }).then(function (dataUrl) { setExportData((prev) => ({ ...prev, data: dataUrl, diff --git a/src/data/constants.js b/src/data/constants.js index 6cd0202..338d65d 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -22,6 +22,7 @@ export const gridSize = 24; export const gridCircleRadius = 0.85; export const tableFieldHeight = 36; export const tableColorStripHeight = 7; +export const pngExportPixelRatio = 4; export const Cardinality = { ONE_TO_ONE: "one_to_one",