Fix problem to create png svg in node.js with 3D plots

modules/base/BasePainter.mjs

@@ -1,5 +1,5 @@
 import { select as d3_select } from '../d3.mjs';
-import { settings, internals, isNodeJs, isFunc, isStr, isObject, btoa_func, getDocument } from '../core.mjs';
+import { settings, internals, isNodeJs, isFunc, isStr, isObject, btoa_func, getDocument, constants } from '../core.mjs';
 import { getColor, addColor } from './colors.mjs';
 
 /** @summary Standard prefix for SVG file context as data url
@@ -882,19 +882,46 @@
       });
 
       const img_src = 'data:image/svg+xml;base64,' + btoa_func(decodeURIComponent(svg));
+
+      // Use the newer and stabler `resvg-js` backend for converting SVG to PNG
+      if (constants.Embed3D.UseResvgJs || constants.Render3D.UseResvgJs) {
+         return import('@resvg/resvg-js').then(({ Resvg }) => {
+            const rawSvg = decodeURIComponent(svg);   // raw SVG XML
+
+            // Initialize Resvg and create the PNG buffer
+            const resvg = new Resvg(rawSvg);
+            const renderData = resvg.render();
+            const pngBuffer = renderData.asPng();
+
+            // Return raw RGBA pixels if caller requested it
+            if (image_format === 'rgba') {
+               return { 
+                  width: renderData.width, 
+                  height: renderData.height, 
+                  data: renderData.pixels
+               };
+            }
+
+            if (args?.as_buffer) {
+               return pngBuffer;
+            }
 
-      return import('canvas').then(async handle => {
-         return handle.default.loadImage(img_src).then(img => {
-            const canvas = handle.default.createCanvas(img.width, img.height);
+            return 'data:image/png;base64,' + pngBuffer.toString('base64');
+         });
+      } else { // Fallback to `node-canvas`
+         return import('canvas').then(async handle => {
+            return handle.default.loadImage(img_src).then(img => {
+               const canvas = handle.default.createCanvas(img.width, img.height);
 
-            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+               canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
 
-            if (args?.as_buffer)
-               return canvas.toBuffer('image/' + image_format);
+               if (args?.as_buffer)
+                  return canvas.toBuffer('image/' + image_format);
 
-            return image_format ? canvas.toDataURL('image/' + image_format) : canvas;
+               return image_format ? canvas.toDataURL('image/' + image_format) : canvas;
+            });
          });
-      });
+      }
    }
 
    const img_src = URL.createObjectURL(new Blob([doctype + svg], { type: 'image/svg+xml;charset=utf-8' }));

modules/core.mjs

@@ -169,6 +169,8 @@ const constants = {
       SVG: 3,
       /** @summary Disable renderer, used for three.js model creation, only for internal use recommended */
       None: 4,
+      /** @summary Use `resvg-js` backend for converting SVGs */
+      UseResvgJs: true,
       fromString(s) {
          if ((s === 'webgl') || (s === 'gl'))
             return this.WebGL;
@@ -194,6 +196,8 @@ const constants = {
       Embed: 2,
       /** @summary Embedding, but when SVG rendering or SVG image conversion is used */
       EmbedSVG: 3,
+      /** @summary Use `resvg-js` backend for converting SVGs */
+      UseResvgJs: true,
       /** @summary Convert string values into number  */
       fromString(s) {
          if (s === 'embed')

modules/hist/TPavePainter.mjs

@@ -66,18 +66,29 @@
             tm = pad?.fTopMargin ?? gStyle.fPadTopMargin,
             bm = pad?.fBottomMargin ?? gStyle.fPadBottomMargin;
 
-      return svgToImage(svg_code).then(canvas => {
-         if (!canvas)
+      return svgToImage(svg_code, 'rgba').then(image => {
+         if (!image)
             return false;
-
-         let nX = 100, nY = 100;
-         const context = canvas.getContext('2d'),
-               arr = context.getImageData(0, 0, canvas.width, canvas.height).data,
-               boxW = Math.floor(canvas.width / nX), boxH = Math.floor(canvas.height / nY),
+
+         let arr;
+         const width = image.width;
+         const height = image.height;
+
+         if (image.data && image.width && image.height) {
+            arr = image.data;
+         } else if (image.getContext('2d')) {
+            arr = image.getContext('2d').getImageData(0, 0, width, height).data;
+         } else {
+            return false;
+         }
+
+         let nX = 100, nY = 100;     
+         const boxW = Math.floor(width / nX),
+               boxH = Math.floor(height / nY),
                raster = new Array(nX * nY);
 
-         if (arr.length !== canvas.width * canvas.height * 4) {
-            console.log(`Image size missmatch in TLegend autoplace ${arr.length} expected ${canvas.width * canvas.height * 4}`);
+         if (arr.length !== width * height * 4) {
+            console.log(`Image size missmatch in TLegend autoplace ${arr.length} expected ${width * height * 4}`);
             nX = nY = 0;
          }
 
@@ -89,7 +100,7 @@
 
                for (let x = px1; (x < px2) && !filled; ++x) {
                   for (let y = py1; y < py2; ++y) {
-                     const indx = (y * canvas.width + x) * 4;
+                     const indx = (y * width + x) * 4;
                      if (arr[indx] || arr[indx + 1] || arr[indx + 2] || arr[indx + 3]) {
                         filled = 1;
                         break;

package.json

@@ -58,22 +58,23 @@
   ],
   "dependencies": {
     "@oneidentity/zstd-js": "^1.0.3",
+    "@resvg/resvg-js": "^2.6.2",
     "canvas": "^3.2.1",
     "jsdom": "^27.4.0",
     "mathjax": "3.2.2",
+    "three": "0.162.0",
     "tmp": "^0.2.5",
-    "xhr2": "^0.2.1",
-    "three": "0.162.0"
+    "xhr2": "^0.2.1"
   },
   "devDependencies": {
-    "gl": "9.0.0-rc.9",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "16.0.1",
-    "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-replace": "6.0.2",
-    "eslint": "^9.39.2",
+    "@rollup/plugin-terser": "0.4.4",
     "@stylistic/eslint-plugin": "^4.4.1",
     "docdash": "^2.0.2",
+    "eslint": "^9.39.2",
+    "gl": "9.0.0-rc.9",
     "jsdoc": "^4.0.5",
     "rollup": "4.56.0",
     "rollup-plugin-ascii": "0.0.3",