Take a Screen Capture and Use it as an Image

[Ahmad Youssef]

Is your feature request related to a problem? Please describe.
I am trying to Take a screenshot of the graph but I don't know the right way to do it

what I actually did is :

 const downloadHandler = () => {
        const graph = document.querySelector('.graph');
        const svgString = new XMLSerializer().serializeToString(graph);

        const canvas = document.createElement('canvas');
        const svgSize = graph.getBoundingClientRect();
        canvas.width = svgSize.width;
        canvas.height = svgSize.height;
        const ctx = canvas.getContext('2d');

        const DOMURL = window.URL || window.webkitURL || window;
        const svg = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});

        const img = new Image();
        const url = DOMURL.createObjectURL(svg);

        img.onload = function () {
            ctx.drawImage(img, 0, 0);
            let jpeg = canvas.toDataURL('image/jpg');
            console.log(jpeg);
            document.querySelector('#png').innerHTML = '<img src="' + jpeg + '"/>';
        };
        img.src = url;
    };

this is graph :

and this is the resolve from the screenshot:

can anyone help me out!

thanks

[Allan Bogh]

The graph has a bunch of CSS associated with it. The SVG image probably isn't rendering the CSS, resulting in the missing styles.

Here are some examples from a similar StackOverflow question.
https://stackoverflow.com/questions/15181452/how-to-save-export-inline-svg-styled-with-css-from-browser-to-image-file

[Ahmad Youssef]

thanks for the info that was helpful.
and I decided to remove the part that I don't want fom the picture like background.
this is my could if anyone need it :

export const downloadHandler = () => {
    const graph = document.querySelector('.graph');
    const copyGraph = graph.cloneNode(true);

    const edge = copyGraph.querySelectorAll('.edge');
    const edgeText = copyGraph.querySelectorAll('.edge .edge-text');
    const endArrow = copyGraph.querySelector('#end-arrow .arrow');
    const background = copyGraph.querySelector('.background');
    background.remove();
    edge.forEach((node) => {
        node.style = `stroke: rgb(32, 168, 215); 
        stroke-width: 2px; 
        marker-end: url("#end-arrow");`;
    });
    edgeText.forEach((node) => {
        node.style = ` font-size: 8px;
            stroke: none !important;
            fill: black !important;`;
    });
    endArrow.style = 'fill: #1e90ff';

    const svgString = new XMLSerializer().serializeToString(copyGraph);
    console.log(svgString);

    const canvas = document.createElement('canvas');
    const svgSize = graph.getBoundingClientRect();
    canvas.width = svgSize.width;
    canvas.height = svgSize.height;
    console.log(svgSize.width);
    const ctx = canvas.getContext('2d');

    const DOMURL = window.URL || window.webkitURL || window;
    const svg = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
    const img = new Image();
    const url = DOMURL.createObjectURL(svg);

    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        // set the ctx to draw beneath your current content
        ctx.globalCompositeOperation = 'destination-over';

        // set the fill color to white
        ctx.fillStyle = 'white';

        // apply fill starting from point (0,0) to point (canvas.width,canvas.height)
        // these two points are the top left and the bottom right of the canvas
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        let jpeg = canvas.toDataURL('image/png');
        console.log(jpeg);
        document.querySelector('#png').innerHTML = '<img src="' + jpeg + '"/>';
    };
    img.src = url;
};