Image export in mxgraph

41 Views Asked by At

i'm trying to export the graph as png

i'm trying to send the graph as xml to a backend function in nodeJs but i have problem in parsing the xml this id my backend function :

app.post('/export', async (req, res) => {
  const xmlData = req.body;
console.log(xmlData)
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Set the viewport size (adjust as needed)
  await page.setViewport({ width: 800, height: 600 });
  const htmlContent = xmlData;

  // Navigate to a data URL containing the HTML content
  await page.goto(`data:text/html,${encodeURIComponent(htmlContent)}`, {
    waitUntil: 'networkidle0',
  });

  // Take a screenshot of the rendered HTML
  const screenshotBuffer = await page.screenshot({ type: 'png' });

  // Close the browser
  await browser.close();

  // Send the PNG image as a response
  res.type('png');
  res.send(screenshotBuffer);
});

this is an example of the xml given <mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="&lt;img src=&quot;./images/stencil/cloud-providers/aws/Analytics/Clean-Rooms.svg&quot; style=&quot;&quot; /&gt;" vertex="1" connectable="0" parent="1"><mxGeometry x="390" y="190" width="100" height="100" as="geometry"><mxRectangle width="100" height="40" as="alternateBounds"/></mxGeometry></mxCell><mxCell id="3" value="link" style="port;image=images/point.png;align=right;imageAlign=right;spacingRight=18" vertex="1" parent="2"><mxGeometry y="0.25" width="10" height="10" relative="1" as="geometry"><mxPoint x="-6" y="-8" as="offset"/></mxGeometry></mxCell><mxCell id="4" value="link" style="port;image=images/point.png;align=right;imageAlign=right;spacingRight=18" vertex="1" parent="2"><mxGeometry y="0.75" width="10" height="10" relative="1" as="geometry"><mxPoint x="-6" y="-6" as="offset"/></mxGeometry></mxCell><mxCell id="5" value="link" style="port;image=images/point.png;spacingLeft=18" vertex="1" parent="2"><mxGeometry x="1" y="0.25" width="10" height="10" relative="1" as="geometry"><mxPoint x="-4" y="-6" as="offset"/></mxGeometry></mxCell><mxCell id="6" value="link" style="port;image=images/point.png;spacingLeft=18" vertex="1" parent="2"><mxGeometry x="1" y="0.75" width="10" height="10" relative="1" as="geometry"><mxPoint x="-4" y="-6" as="offset"/></mxGeometry></mxCell></root></mxGraphModel>

0

There are 0 best solutions below