Question

我在jsp文件中创建了一个虚拟图像。

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

单击虚拟图像后，将调用.js函数editDiagram，该函数随后在iFrame中打开draw.io并提供制作新图像并将其保存的选项。

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

如果我正确理解您的代码，则可以通过save（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的“解码”按钮中查看解码功能的代码

如何在draw.io中创建新图像并将其保存在我的网站中？

1 个答案: