Как создать новое изображение в draw.io и сохранить его в базе данных на моем сайте?

Question

Я создал фиктивное изображение в моем файле JSP.

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

При нажатии на фиктивное изображение вызывается функция editDiagram.js, которая, в свою очередь, открывает draw.io в iFrame и предоставляет возможность создать новое изображение и сохранить его.

        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);
            }
        }

Но когда я создаю новое изображение и нажимаю кнопку сохранить, новое изображение не отображается на веб-странице, вместо этого отображается только пустое изображение, которое запускает файл.js. Как мне показать новое изображение на моем веб-сайте и заменить фиктивное изображение, а также сохранить его в базе данных?

Answer 1

Я думаю, что изображение не обновляется, потому что после установки новых данных изображения с помощью:

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

Вы перезагружаете страницу с помощью функции сохранения (URL), если я правильно понял ваш код. В любом случае, чтобы сохранить график в базе данных, вы можете сохранить его в виде простого XML, а затем сохранить его в БД. Вы должны изменить свой код следующим образом:

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

Пожалуйста, смотрите код функции декодирования в кнопке "Декодировать" в https://jgraph.github.io/drawio-tools/tools/convert.html