0

I got following JS Code in an onClick Eventhandler, it draws an inline SVG to a Canvas and then exports as PNG:

 var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var data = (new XMLSerializer()).serializeToString(svg);
            var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
            var DOMURL = window.URL || window.webkitURL || window;

            var img = new Image();

            var url = DOMURL.createObjectURL(svgBlob);

            img.onload = function () {
                ctx.canvas.width = size;
                ctx.canvas.height = size;
                ctx.drawImage(img, 0, 0);
                DOMURL.revokeObjectURL(url);

                var imgURI = canvas
                    .toDataURL('image/png')
                    .replace('image/png', 'image/octet-stream');

                triggerDownload(imgURI, 'icon_'+icon+'.'+fileType.toLowerCase());
            };

            img.src = url;

This works fine in Chrome but returns blank in Firefox. One common error I found here at SO that i need to run the code in the onLoad Event on the img, but that doesn't seem to help here. Thanks in advance for any help!

js-dev
  • 65
  • 1
  • 4
  • https://stackoverflow.com/questions/28690643/firefox-svg-canvas-drawimage-error/28692538#28692538 I think this answer helps you – defghi1977 Sep 19 '17 at 11:59
  • Yes that helped, I cloned the inline and then added the size attributes, so that the svg seen by the user does not change. Do you want to post an answer? – js-dev Sep 19 '17 at 17:38

0 Answers0