diff --git a/Dockerfile b/Dockerfile index b1d253808..16e9d2159 100644 --- a/Dockerfile +++ b/Dockerfile @@ -7,7 +7,6 @@ RUN dnf install -y git \ && dnf install -y nodejs \ && dnf clean all - # Install dependencies required by node-canvas RUN dnf install -y \ gcc \ @@ -19,9 +18,22 @@ RUN dnf install -y \ libpng-devel \ make \ python3 \ + fontconfig \ + freetype \ python3-pip \ + wget \ + unzip \ && dnf clean all +# Install Montserrat fonts +RUN cd /tmp \ + && wget https://images.imex.online/fonts/montserrat.zip -O montserrat.zip \ + && unzip montserrat.zip -d montserrat \ + && mv montserrat/montserrat/*.ttf /usr/share/fonts \ + && fc-cache -fv \ + && rm -rf /tmp/montserrat /tmp/montserrat.zip \ + && echo "Montserrat fonts installed and cached successfully." + # Set the working directory WORKDIR /app diff --git a/package-lock.json b/package-lock.json index dc75214ae..1c1fe8c05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,6 +53,7 @@ "recursive-diff": "^1.0.9", "redis": "^4.7.0", "rimraf": "^6.0.1", + "skia-canvas": "^2.0.0", "soap": "^1.1.6", "socket.io": "^4.8.1", "socket.io-adapter": "^2.5.5", @@ -3875,6 +3876,15 @@ "node": ">=6" } }, + "node_modules/cargo-cp-artifact": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/cargo-cp-artifact/-/cargo-cp-artifact-0.1.9.tgz", + "integrity": "sha512-6F+UYzTaGB+awsTXg0uSJA1/b/B3DDJzpKVRu0UmyI7DmNeaAl2RFHuTGIN6fEgpadRxoXGb7gbC1xo4C3IdyA==", + "license": "MIT", + "bin": { + "cargo-cp-artifact": "bin/cargo-cp-artifact.js" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -7136,6 +7146,12 @@ "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz", "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==" }, + "node_modules/parenthesis": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz", + "integrity": "sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw==", + "license": "MIT" + }, "node_modules/parse5": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", @@ -7168,6 +7184,12 @@ "node": ">= 0.8" } }, + "node_modules/path-browserify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", + "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==", + "license": "MIT" + }, "node_modules/path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", @@ -7847,6 +7869,73 @@ "is-arrayish": "^0.3.1" } }, + "node_modules/skia-canvas": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/skia-canvas/-/skia-canvas-2.0.0.tgz", + "integrity": "sha512-wpYkmr9mCxBme5HAnlm6YOEiuaN9tIm9CL+HN8e5AFD4K2FAJXCcWiWvc9+LM8jUXt+AyYXgiwUTBxdQ6P+PEg==", + "hasInstallScript": true, + "license": "MIT", + "dependencies": { + "@mapbox/node-pre-gyp": "^1.0.11", + "cargo-cp-artifact": "^0.1", + "glob": "^11.0.0", + "path-browserify": "^1.0.1", + "simple-get": "^4.0.1", + "string-split-by": "^1.0.0" + } + }, + "node_modules/skia-canvas/node_modules/decompress-response": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz", + "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==", + "license": "MIT", + "dependencies": { + "mimic-response": "^3.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/skia-canvas/node_modules/mimic-response": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz", + "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/skia-canvas/node_modules/simple-get": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz", + "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "decompress-response": "^6.0.0", + "once": "^1.3.1", + "simple-concat": "^1.0.0" + } + }, "node_modules/slick": { "version": "1.12.2", "resolved": "https://registry.npmjs.org/slick/-/slick-1.12.2.tgz", @@ -8239,6 +8328,15 @@ } ] }, + "node_modules/string-split-by": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/string-split-by/-/string-split-by-1.0.0.tgz", + "integrity": "sha512-KaJKY+hfpzNyet/emP81PJA9hTVSfxNLS9SFTWxdCnnW1/zOOwiV248+EfoX7IQFcBaOp4G5YE6xTJMF+pLg6A==", + "license": "MIT", + "dependencies": { + "parenthesis": "^3.1.5" + } + }, "node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", diff --git a/package.json b/package.json index 288eb99c8..94f0ce5ba 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "recursive-diff": "^1.0.9", "redis": "^4.7.0", "rimraf": "^6.0.1", + "skia-canvas": "^2.0.0", "soap": "^1.1.6", "socket.io": "^4.8.1", "socket.io-adapter": "^2.5.5", diff --git a/server/middleware/validateCanvasInputMiddleware.js b/server/middleware/validateCanvasInputMiddleware.js new file mode 100644 index 000000000..a03bb12ec --- /dev/null +++ b/server/middleware/validateCanvasInputMiddleware.js @@ -0,0 +1,32 @@ +const { isObject } = require("lodash"); + +const validateCanvasInputMiddleware = (req, res, next) => { + const { values, keys, override, w, h } = req.body; + + if (!Array.isArray(values) || !Array.isArray(keys)) { + return res.status(400).send("Invalid input: 'values' and 'keys' must be arrays."); + } + + if (values.some((value) => typeof value !== "number")) { + return res.status(400).send("Invalid input: 'values' must be an array of numbers."); + } + + if (keys.some((key) => typeof key !== "string")) { + return res.status(400).send("Invalid input: 'keys' must be an array of strings."); + } + + if (override && !isObject(override)) { + return res.status(400).send("Override must be an object"); + } + + if (w && (!Number.isFinite(w) || w <= 0)) { + return res.status(400).send("Width must be a positive number"); + } + if (h && (!Number.isFinite(h) || h <= 0)) { + return res.status(400).send("Height must be a positive number"); + } + + next(); // Proceed to the next middleware or route handler +}; + +module.exports = validateCanvasInputMiddleware; diff --git a/server/middleware/validateCanvasRequestMiddleware.js b/server/middleware/validateCanvasRequestMiddleware.js deleted file mode 100644 index 4a3bdc12f..000000000 --- a/server/middleware/validateCanvasRequestMiddleware.js +++ /dev/null @@ -1,20 +0,0 @@ -const { isObject } = require("lodash"); - -const validateCanvasRequestMiddleware = (req, res, next) => { - const { w, h, values, keys, override } = req.body; - if (!values || !keys) { - return res.status(400).send("Missing required data"); - } - if (override && !isObject(override)) { - return res.status(400).send("Override must be an object"); - } - if (w && (!Number.isFinite(w) || w <= 0)) { - return res.status(400).send("Width must be a positive number"); - } - if (h && (!Number.isFinite(h) || h <= 0)) { - return res.status(400).send("Height must be a positive number"); - } - next(); -}; - -module.exports = validateCanvasRequestMiddleware; diff --git a/server/render/canvas-handler.js b/server/render/canvas-handler.js index a0fd0a602..5b810dd73 100644 --- a/server/render/canvas-handler.js +++ b/server/render/canvas-handler.js @@ -1,124 +1,149 @@ const { createCanvas } = require("canvas"); +const { Canvas, FontLibrary } = require("skia-canvas"); const Chart = require("chart.js/auto"); -const logger = require("../utils/logger"); const { backgroundColors, borderColors } = require("./canvas-colors"); -const { isObject, defaultsDeep, isNumber } = require("lodash"); +const { defaultsDeep, isNumber } = require("lodash"); + +const CANVAS_QUEUE_LIMIT = 100; let isProcessing = false; const requestQueue = []; -const processCanvasRequest = async (req, res) => { - try { - const { w, h, values, keys, override } = req.body; - logger.log("inbound-canvas-creation", "debug", "jsr", null, { w, h, values, keys, override }); +try { + FontLibrary.use("Montserrat", [ + "/usr/share/fonts/Montserrat-Regular.ttf", + "/usr/share/fonts/Montserrat-Bold.ttf", + "/usr/share/fonts/Montserrat-Italic.ttf" + ]); +} catch (error) { + console.error( + "Error loading fonts Skia Canvas Fonts, please be sure to install Montserrat font package", + error.message + ); +} - // Set dimensions with defaults - const width = isNumber(w) ? w : 500; - const height = isNumber(h) ? h : 275; - - const configuration = { - type: "doughnut", - data: { - labels: keys, - datasets: [ - { - data: values, - backgroundColor: backgroundColors, - borderColor: borderColors, - borderWidth: 1 - } - ] - }, - options: { - animation: false, - devicePixelRatio: 4, - responsive: false, - maintainAspectRatio: true, - circumference: 180, - rotation: -90, - plugins: { - legend: { - labels: { - boxWidth: 20, - font: { - family: "'Montserrat'", - size: 10, - style: "normal", - weight: "normal" - } - }, - position: "left" - } +// Utility to create a chart configuration +const getChartConfiguration = (keys, values, override) => { + const defaultConfiguration = { + type: "doughnut", + data: { + labels: keys, + datasets: [ + { + data: values, + backgroundColor: backgroundColors, + borderColor: borderColors, + borderWidth: 1 + } + ] + }, + options: { + devicePixelRatio: 4, + responsive: false, + animation: false, + maintainAspectRatio: true, + circumference: 180, + rotation: -90, + plugins: { + legend: { + labels: { + boxWidth: 20, + font: { + family: "'Montserrat'", + size: 10, + style: "normal", + weight: "normal" + } + }, + position: "left" } } - }; - - // If we have a valid override object, merge it with the default configuration object. - // This allows for you to override the default configuration with a custom one. - const defaults = () => { - if (!override || !isObject(override)) { - return configuration; - } - return defaultsDeep(override, configuration); - }; - - // Generate chart - let canvas = createCanvas(width, height); - let ctx = canvas.getContext("2d"); - let chart = new Chart(ctx, defaults()); - const result = canvas.toDataURL(); - - chart.destroy(); - canvas.width = 0; - canvas.height = 0; - ctx = null; - canvas = null; - chart = null; - - res.status(200).send(result); - } catch (error) { - if (chart) chart.destroy(); - if (canvas) { - canvas.width = 0; - canvas.height = 0; } - ctx = null; - canvas = null; - chart = null; + }; - logger.log("inbound-canvas-creation", "error", "jsr", null, { error: error.message, stack: error.stack }); - res.status(500).send("Error generating canvas"); + return defaultsDeep(override || {}, defaultConfiguration); +}; + +const processCanvasRequest = async (req, res, isSkia = false) => { + const { logger } = req; + const { w, h, values, keys, override } = req.body; + + logger.log("inbound-canvas-creation", "debug", "jsr", null, { w, h, values, keys, override }); + + // Default width and height + const width = isNumber(w) && w > 0 ? w : 500; + const height = isNumber(h) && h > 0 ? h : 275; + + const configuration = getChartConfiguration(keys, values, override); + + // Placeholders to allow fine control over GAC + let canvas = null; + let ctx = null; + let chart = null; + let chartImage = null; + + try { + // Create the canvas + canvas = isSkia ? new Canvas(width, height) : createCanvas(width, height); + ctx = canvas.getContext("2d"); + + // Render the chart + chart = new Chart(ctx, configuration); + + // Generate and send the image + chartImage = isSkia ? (await canvas.toBuffer("image/png")).toString("base64") : canvas.toDataURL(); + + res.status(200).send(isSkia ? `data:image/png;base64,${chartImage}` : chartImage); + } catch (error) { + // Log the error and send the response + logger.log("canvas-error", "error", "jsr", null, { error: error.message }); + res.status(500).send("Failed to generate canvas."); + } finally { + // Cleanup resources + if (chart) { + chart.destroy(); + } + ctx = null; // Explicitly nullify for garbage collection + canvas = null; // Explicitly nullify for garbage collection + chartImage = null; } }; -const processNextInQueue = async () => { - if (requestQueue.length === 0) { - isProcessing = false; - return; +const enqueueRequest = (req, res, isSkia) => { + if (requestQueue.length >= CANVAS_QUEUE_LIMIT) { + res.status(503).send("Server is busy. Please try again later."); + return false; } + requestQueue.push({ req, res, isSkia }); + req.logger.log("inbound-canvas-creation-queue", "debug", "jsr", null, { queue: requestQueue.length }); + return true; +}; - const { req, res } = requestQueue.shift(); - await processCanvasRequest(req, res); - processNextInQueue(); +const processNextInQueue = async () => { + while (requestQueue.length > 0) { + const { req, res, isSkia } = requestQueue.shift(); + try { + await processCanvasRequest(req, res, isSkia); + } catch (err) { + console.error("canvas-queue-error", "error", "jsr", null, { error: err.message }); + } + } + isProcessing = false; }; exports.canvastest = function (req, res) { res.status(200).send("OK"); }; -exports.canvas = async function (req, res) { - if (isProcessing) { - if (requestQueue.length >= 100) { - // Set a maximum queue size - return res.status(503).send("Server is busy. Please try again later."); - } - requestQueue.push({ req, res }); - logger.log("inbound-canvas-creation-queue", "debug", "jsr", null, { queue: requestQueue.length }); - return; - } - +exports.canvas = async (req, res) => { + if (isProcessing || !enqueueRequest(req, res, false)) return; isProcessing = true; - await processCanvasRequest(req, res); - processNextInQueue(); + processNextInQueue().catch((err) => console.error("canvas-processing-error", { error: err.message })); +}; + +exports.canvasSkia = async (req, res) => { + if (isProcessing || !enqueueRequest(req, res, true)) return; + isProcessing = true; + processNextInQueue().catch((err) => console.error("canvas-processing-error", { error: err.message })); }; diff --git a/server/routes/renderRoutes.js b/server/routes/renderRoutes.js index 2657d6a76..c1423f698 100644 --- a/server/routes/renderRoutes.js +++ b/server/routes/renderRoutes.js @@ -2,11 +2,12 @@ const express = require("express"); const router = express.Router(); const { inlinecss } = require("../render/inlinecss"); const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware"); -const validateCanvasRequestMiddleware = require("../middleware/validateCanvasRequestMiddleware"); -const { canvas } = require("../render/canvas-handler"); +const { canvas, canvasSkia } = require("../render/canvas-handler"); +const validateCanvasInputMiddleware = require("../middleware/validateCanvasInputMiddleware"); // Define the route for inline CSS rendering router.post("/inlinecss", validateFirebaseIdTokenMiddleware, inlinecss); -router.post("/canvas", [validateFirebaseIdTokenMiddleware, validateCanvasRequestMiddleware], canvas); +router.post("/canvas", [validateFirebaseIdTokenMiddleware, validateCanvasInputMiddleware], canvas); +router.post("/canvas-skia", [validateFirebaseIdTokenMiddleware, validateCanvasInputMiddleware], canvasSkia); module.exports = router;