0

我在我的 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 文件的虚拟图像。如何在我的网站中显示新图像并替换虚拟图像并将其保存在数据库中？

4

1 回答 1

0

我认为图像没有更新，因为在设置新图像数据后：

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中“解码”按钮中的解码功能代码

于 2018-11-21T15:59:57.257 回答