canvas image didn't drawn in internet explorer

Question

I have tried to export the svg element to canvas element and that was working finr in chrome and firefox but that was not working in IE. can you please guide me what i made wrong or how to solve this?

Here is my code,

$("#import").click(function(){
                var canvas = document.getElementById('canvas1');
                var ctx = canvas.getContext('2d');
                var DOMURL = window.URL || window.webkitURL || window;
                $("#containerew").attr("xmlns", "http://www.w3.org/2000/svg");
                var data1 = document.getElementById("containerew").outerHTML;
                var img = new Image();
                var svg = new Blob([data1], { type: 'image/svg+xml;charset=utf-8' });
                var url = DOMURL.createObjectURL(svg);


                img.onload = function () {
                    ctx.drawImage(img,25, 25);
                    DOMURL.revokeObjectURL(url);
                }
                img.src = url;


            return true;
       });

Please find the below link for example

Sample

http://caniuse.com/#feat=canvas. I think in IE11 only it will work — Ray, Aug 04 '16 at 10:06
@JaromandaX i am also using same version but not working :-( — Akbar Basha, Aug 04 '16 at 10:08
As I said in my comment to your [previous question](http://stackoverflow.com/questions/38760036/#comment-64900215_38760036), for security reasons IE prior to Edge will taint the canvas once any svg image has been drawn to it, you won't be able to export it. The only workarounds would be server-side or to ask your user to right click the svg, save as..., there is an option to save as png. You can see the [examples.SO topic about drawing svg to a canvas](http://stackoverflow.com/documentation/html5-canvas/3689/media-types-and-the-canvas/14410/drawing-an-svg-image#t=201608041026050203845). — Kaiido, Aug 04 '16 at 10:26
@Kaiido, the question is svg not drawn into canvas. It's not about exporting — Kira, Aug 04 '16 at 10:30
Ah or I read wrongly and it's actually not drawing at all? Then check [this answer](http://stackoverflow.com/questions/27230293/how-to-convert-svg-to-png-using-html5-canvas-javascript-jquery-and-save-on-serve/33227005#33227005) for a bullet proof way to draw an svg element to a canvas. — Kaiido, Aug 04 '16 at 10:30
@Kaiido can u please solve in this sample http://jsfiddle.net/33g8g/23/ — Akbar Basha, Aug 04 '16 at 10:32
@Kira, just figured it out yep, was still focused on [the precious post by OP](http://stackoverflow.com/questions/38760036/drawimage-not-working-in-canvas-mode?noredirect=1#comment64900153_38760036), where he wants to export as dataURL, which won't be possible anyway, so not sure he really needs to solve this problem at the end. — Kaiido, Aug 04 '16 at 10:32
@JaromandaX, the markup in the fiddle **is valid** when inside an html document. But you're right, IE won't like that the OP uses `outerHTML`, which won't nicely close the tags nor add the xmlns attribute needed. He needs to use an `XMLSerializer()`. Akbar, seriously, I'm not sure I've got the energy to do your job for you. I know that what I gave you is enough for you to get this done. Good luck. — Kaiido, Aug 04 '16 at 10:35
@Kaiido - I solved one of the many errors logged to the console and managed to get the image onto the canvas by fixing the `` tag - so, valid markup is important for this usage — Jaromanda X, Aug 04 '16 at 10:37
@JaromandaX, read my updated comment. non-closed tag is valid in HTML, but in xml, you need the closing mark (`/>`) on self-closing tags. IE parser throws a lot of errors where it shouldn't, particularly on self-closing tags. That's a known bug of IE, but the markup is correct. And once again, it should be solved by the use of an XMLSerializer, can you try it ? I don't have the courage to launch my VM. — Kaiido, Aug 04 '16 at 10:40
no, I don't have time for someone who claims there are no errors, then says the errors are just in jsfiddle - I dropped the mic and went home :p — Jaromanda X, Aug 04 '16 at 10:41

canvas image didn't drawn in internet explorer

0 Answers0