How to create new Image in draw.io and Save it database from within my website?

Question

I have created a dummy image in my jsp file.

<img id="image" style="max-width:100%;cursor:pointer;" onclick="editDiagram(this); " src="data:image/png;base64,iVBORw0K.....>

On clicking the dummy image the a .js function editDiagram is called which in turn opens draw.io in an iFrame and provide option to make new image and save it.

        function editDiagram(image)
        {
            var initial = image.getAttribute('src');
            image.setAttribute('src', 'http://www.draw.io/images/ajax-loader.gif');
            var iframe = document.createElement('iframe');
            iframe.setAttribute('frameborder', '0');

            var close = function()
            {
                image.setAttribute('src', initial);
                document.body.removeChild(iframe);
                window.removeEventListener('message', receive);
            };
            var receive = function(evt)
            {
                if (evt.data.length > 0)
                {
                    var msg = JSON.parse(evt.data);

                    if (msg.event == 'init')
                    {
                        iframe.contentWindow.postMessage(JSON.stringify({action: 'load',
                            xmlpng: initial}), '*');
                    }
                    else if (msg.event == 'export')
                    {
                        close();
                        image.setAttribute('src', msg.data);
                        save(location.href);
                    }
                    else if (msg.event == 'save')
                    {
                        iframe.contentWindow.postMessage(JSON.stringify({action: 'export',
                            format: 'xmlpng', spin: 'Updating page'}), '*');
                    }
                    else if (msg.event == 'exit')
                    {
                        close();
                    }
                }
            };
            window.addEventListener('message', receive);
            iframe.setAttribute('src', 'https://www.draw.io/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json');
            document.body.appendChild(iframe);
        };

        function save(url)
        {
            if (url != null)
            {
                var req = new XMLHttpRequest();
                req.withCredentials = true;

                req.onreadystatechange = function()
                {
                    if (req.readyState == 4)
                    {
                        if (req.status < 200 || req.status > 299)
                        {
                            alert('Error ' + req.status);
                        }
                    }
                };

                req.open('PUT', url, true);
                req.send(document.documentElement.outerHTML);
            }
        }

But when i create the new image and click save the new image is not displayed in the webpage, instead only the dummmy image that fires the .js file is only shown. How do I show the new image in my website and replace the dummy image and also save it in Database ?

Marco Azzalini · Answer 1 · 2018-11-23T11:07:29.670

I think the image is not updated because after setting the new image data with:

image.setAttribute('src', msg.data);

you reload the page through your save(url) function, if I understood correctly your code. Anyway, to persist the graph in a database you can save it as plain xml, and then store it in the DB. You need to modify your code as the following:

   else if (msg.event == 'save') {
        var contentXML=msg.xml;                 
        var decodedXML=decode(contentXML);
        saveDiagramInMyDB(decodedXML);
    }

Please, see the code for the decode function in 'Decode' button in https://jgraph.github.io/drawio-tools/tools/convert.html

How to create new Image in draw.io and Save it database from within my website?

1 Answers1