0

I try to render diagram from xml to svg,then svg to draw in canvas and save at the computer.

Canvas.toDataUrl() SecurityError in ie 11,but for google chrome is fine. How did resolve this problem It the same with this ,but it not help me this my file for rendering diagram

Please,help me.

I have this function

 $('#exportBtn').click(function () {
            var object = new Object();
            object.xml=xml;
            render(object)
            var svg = document.querySelector("svg");
            var img = document.createElement("img");
            var canvas = document.createElement("canvas");

            var svgSize = svg.getBoundingClientRect();
            canvas.width = svgSize.width * 3;
            canvas.height = svgSize.height * 3;
            canvas.style.width = svgSize.width;
            canvas.style.height = svgSize.height;

            var svgData = new XMLSerializer().serializeToString(svg);

            var svg64 = btoa(svgData);
            var b64Start = 'data:image/svg+xml;base64,';
            var image64 = b64Start + svg64;

            img.onload = function () {
                var ctx = canvas.getContext("2d");
                ctx.scale(3, 3);
                var x0 = Math.floor(0);
                var y0 = Math.floor(0);
                ctx.translate(-x0, -y0);           
                var bg = graph.background;

                if (bg == null || bg == '' || bg == mxConstants.NONE) {
                    bg = '#ffffff';
                }

                ctx.save();
                ctx.fillStyle = bg;
                ctx.fillRect(x0, y0, Math.ceil(svgSize.width * 3), Math.ceil(svgSize.height * 3));
                ctx.restore();
                ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
                var canvasdata = canvas.toDataURL("image/png", 1);
                var a = document.createElement("a");
                a.download = "download_img" + ".png";
                a.href = canvasdata;
                document.body.appendChild(a);
                a.click();
            };
            img.src = image64;
        }
            );

this my error

StackMan
  • 1
  • 1
  • Please put the relevant parts of your code and the full error message in your actual question. Don't forget to format it properly – Capricorn Jul 26 '18 at 13:52
  • The SO question you link to contains your answer: IE11 considers `` elements as if they are always cross-origin and therefor taint the canvas, disallowing you to take the data out. They also suggested the solution of using `canvg` if you require this option. No ways around this and I don't see Microsft ever bugfixing this one. – somethinghere Jul 26 '18 at 13:54

0 Answers0