paulmataruso/patchmon.net
1
0
Fork 0
mirror of https://github.com/9technologygroup/patchmon.net.git synced 2025-11-14 10:55:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use SVG-based rendering for Trianglify in browser instead of Node.js canvas

Browse Source
This commit is contained in:
Muhammad Ibrahim
2025-10-28 18:35:52 +00:00
parent 93760d03e1
commit 2975da0f69
2 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/Layout.jsx
View File

@@ -261,8 +261,23 @@ const Layout = ({ children }) => {
yColors: themeConfig.login.yColors,
});
// Render to canvas
pattern.toCanvas(bgCanvasRef.current);
// Render to canvas using SVG (browser-compatible)
const svg = pattern.toSVG();
const ctx = bgCanvasRef.current.getContext("2d");
const img = new Image();
const blob = new Blob([svg], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
img.onload = () => {
ctx.drawImage(
img,
0,
0,
bgCanvasRef.current.width,
bgCanvasRef.current.height,
);
URL.revokeObjectURL(url);
};
img.src = url;
}
} catch (error) {
// Canvas/trianglify not available, skip background generation

19
frontend/src/pages/Login.jsx
View File

@@ -77,8 +77,23 @@ const Login = () => {
yColors: themeConfig.login.yColors,
});
// Render to canvas
pattern.toCanvas(canvasRef.current);
// Render to canvas using SVG (browser-compatible)
const svg = pattern.toSVG();
const ctx = canvasRef.current.getContext("2d");
const img = new Image();
const blob = new Blob([svg], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
img.onload = () => {
ctx.drawImage(
img,
0,
0,
canvasRef.current.width,
canvasRef.current.height,
);
URL.revokeObjectURL(url);
};
img.src = url;
}
} catch (error) {
// Canvas/trianglify not available, skip background generation