Build with resvg-js use

Author: linev

build/jsroot.js

@@ -14,7 +14,7 @@ const version_id = 'dev',
 
 /** @summary version date
   * @desc Release date in format day/month/year like '14/04/2022' */
-version_date = '30/01/2026',
+version_date = '2/02/2026',
 
 /** @summary version id and date
   * @desc Produced by concatenation of {@link version_id} and {@link version_date}
@@ -257,6 +257,8 @@ settings = {
    Render3DBatch: constants$1.Render3D.Default,
    /** @summary Way to embed 3D drawing in SVG, see {@link constants.Embed3D} for possible values */
    Embed3D: constants$1.Embed3D.Default,
+   /** @summary Use `resvg-js` backend for converting SVGs in node.js */
+   UseResvgJs: true,
    /** @summary Default canvas width */
    CanvasWidth: 1200,
    /** @summary Default canvas height */
@@ -965,11 +967,12 @@ function findFunction(name) {
 
 /** @summary Method to create http request, without promise can be used only in browser environment
   * @private */
-function createHttpRequest(url, kind, user_accept_callback, user_reject_callback, use_promise) {
+function createHttpRequest(url, kind, user_accept_callback, user_reject_callback, use_promise, tmout) {
    function configureXhr(xhr) {
       xhr.http_callback = isFunc(user_accept_callback) ? user_accept_callback.bind(xhr) : () => {};
       xhr.error_callback = isFunc(user_reject_callback) ? user_reject_callback.bind(xhr) : function(err) {
-         console.warn(err.message);
+         if (err?.message)
+            console.warn(err.message);
          this.http_callback(null);
       }.bind(xhr);
 
@@ -1079,6 +1082,15 @@ function createHttpRequest(url, kind, user_accept_callback, user_reject_callback
          xhr.responseType = 'arraybuffer';
       }
 
+      if (tmout && Number.isFinite(tmout)) {
+         xhr.timeout = tmout;
+         xhr.ontimeout = function() {
+            this.did_abort = true;
+            this.abort();
+            this.error_callback(Error(`Request ${url} timeout`));
+         };
+      }
+
       return xhr;
    }
 
@@ -9601,7 +9613,8 @@ async function svgToImage(svg, image_format, args) {
       return internals.makePDF ? internals.makePDF(svg, args) : null;
 
    // required with df104.py/df105.py example with RCanvas or any special symbols in TLatex
-   const doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
+   const doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',
+         is_rgba = image_format === 'rgba';
 
    if (isNodeJs()) {
       svg = encodeURIComponent(doctype + svg);
@@ -9612,6 +9625,31 @@ async function svgToImage(svg, image_format, args) {
 
       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 (settings.UseResvgJs) {
+         return Promise.resolve().then(function () { return index; }).then(({ Resvg }) => {
+            const rawSvg = decodeURIComponent(svg),    // raw SVG XML
+                  resvg = new Resvg(rawSvg), // Initialize Resvg and create the PNG buffer
+                  renderData = resvg.render(),
+                  pngBuffer = renderData.asPng();
+
+            // Return raw RGBA pixels if caller requested it
+            if (is_rgba) {
+               return {
+                  width: renderData.width,
+                  height: renderData.height,
+                  data: renderData.pixels
+               };
+            }
+
+            if (args?.as_buffer)
+               return pngBuffer;
+
+            return 'data:image/png;base64,' + pngBuffer.toString('base64');
+         });
+      }
+
+      // Fallback to `node-canvas`
       return Promise.resolve().then(function () { return _rollup_plugin_ignore_empty_module_placeholder$1; }).then(async handle => {
          return handle.default.loadImage(img_src).then(img => {
             const canvas = handle.default.createCanvas(img.width, img.height);
@@ -9621,7 +9659,7 @@ async function svgToImage(svg, image_format, args) {
             if (args?.as_buffer)
                return canvas.toBuffer('image/' + image_format);
 
-            return image_format ? canvas.toDataURL('image/' + image_format) : canvas;
+            return image_format && !is_rgba ? canvas.toDataURL('image/' + image_format) : canvas;
          });
       });
    }
@@ -9643,7 +9681,7 @@ async function svgToImage(svg, image_format, args) {
          if (args?.as_buffer && image_format)
             canvas.toBlob(blob => blob.arrayBuffer().then(resolveFunc), 'image/' + image_format);
          else
-            resolveFunc(image_format ? canvas.toDataURL('image/' + image_format) : canvas);
+            resolveFunc(image_format && !is_rgba ? canvas.toDataURL('image/' + image_format) : canvas);
       };
       image.onerror = function(arg) {
          URL.revokeObjectURL(img_src);
@@ -91245,18 +91283,26 @@ class TPavePainter extends ObjectPainter {
             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 arr = image.data;
+         const width = image.width, height = image.height;
+
+         if (!arr && isFunc(image.getContext) && image.getContext('2d'))
+            arr = image.getContext('2d').getImageData(0, 0, width, height).data;
+
+         if (!arr)
             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),
+         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;
          }
 
@@ -91268,7 +91314,7 @@ class TPavePainter extends ObjectPainter {
 
                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;
@@ -168594,6 +168640,34 @@ __proto__: null,
 default: _rollup_plugin_ignore_empty_module_placeholder
 });
 
+const { render: _render, renderAsync: _renderAsync, Resvg: _Resvg } = require('./js-binding.js');
+
+module.exports.render = function render(svg, options) {
+  if (options) {
+    return _render(svg, JSON.stringify(options))
+  }
+  return _render(svg)
+};
+
+module.exports.renderAsync = function renderAsync(svg, options, signal) {
+  if (options) {
+    return _renderAsync(svg, JSON.stringify(options), signal)
+  }
+  return _renderAsync(svg, null, signal)
+};
+
+module.exports.Resvg = class Resvg extends _Resvg {
+  constructor(svg, options) {
+    super(svg, JSON.stringify(options));
+  }
+};
+
+// module.exports.Resvg = _Resvg
+
+var index = /*#__PURE__*/Object.freeze({
+__proto__: null
+});
+
 /** @summary Draw TEllipse
   * @private */
 function drawEllipse() {

changes.md

@@ -8,6 +8,7 @@
 1. Implements `TTree` branches filtering via context menu #364
 1. Let define alternative draw function #378
 1. Implement padsN draw option for `THStack` and `TMultiGraph`
+1. Use `resvg-js` backend for PNG support in node.js #391, thanks to https://github.com/OmarMesqq
 1. Remove support for deprectaed `TH1K` class
 1. Fix - paint frame border mode/size from TCanvas
 1. Fix - correctly process `TLeafB` arrays in tree draw #384

modules/core.mjs

@@ -6,7 +6,7 @@ const version_id = 'dev',
 
 /** @summary version date
   * @desc Release date in format day/month/year like '14/04/2022' */
-version_date = '30/01/2026',
+version_date = '2/02/2026',
 
 /** @summary version id and date
   * @desc Produced by concatenation of {@link version_id} and {@link version_date}