How to Exporting SVG as PNG format

Question

For the Size problem i removed some svg content. I want to achieve the svg image to be exported as png or any image format for Reporting purpose

<!DOCTYPE html>
        <html>
        <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(function(){
        function SaveasImage(){
        var myCanvas = document.getElementById('myCanvas');
        // get 2D context
        var myCanvasContext = myCanvas.getContext('2d');
        // Load up our image.
        var source = new Image();
        var img = document.getElementById('svg1');
        source.src = img.svg;
        myCanvasContext.drawImage(source,0,0,200,200);
        $("#resultImage").attr("src",myCanvas.toDataURL("image/png"));
        }
        });
        </script>
        </head>
        <body>
        <h1>My first SVG</h1>
        <canvas id="myCanvas" width="200" height="100"></canvas>
        <svg version="1.1" id="svg1" style="font-family:&quot;Lucida Grande&quot;, 
        &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="322" height="194"><text x="49" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:96px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="76" opacity="1">50</text><text x="49" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:96px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="13" opacity="1">100</text></g></svg>
        <input type="button" onclick="SaveasImage()" value="exportasimage" />
        </body>
        </html>

score 2 · Answer 1 · edited Oct 28 '16 at 19:36

There we a few issues with your approach. I removed JQ & simplified the SVG itself. First, you need to set up what happens to the img with an onload event before you set the source. Once this is done the src has be be set with a URI, usually this is a link, but we can use

data:image/svg+xml;base64

So here's a version which will log to console your <svg> as .png(in base64).

<html>
 <head>
  <script>
   window.onload = function() {  
    var myCanvas = document.getElementById('myCanvas');
    var myCanvasContext = myCanvas.getContext('2d');
    var source = new Image();
    var img = document.getElementById('svg1');
    source.onload = function() {
     myCanvasContext.drawImage(source,0,0,200,200);
     document.getElementById('output').src = myCanvas.toDataURL("image/png");
     console.log(myCanvas.toDataURL("image/png"));
    }     
    source.src = 'data:image/svg+xml;base64,'+btoa(img.outerHTML);
   }
  </script>
  </script>
 </head>
 <body>
  <h1>My first SVG</h1>
  <canvas id="myCanvas" width="200" height="100"></canvas>
  <svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" width="322" height="194">
   <text x="49" text-anchor="end" transform="translate(0,0)" y="76" opacity="1">50</text>
   <text x="49" text-anchor="end" transform="translate(0,0)" y="13" opacity="1">100</text>
  </svg>
  <img id="output" />
  <input type="button" onclick="SaveasImage()" value="exportasimage" />
 </body>
</html>

How to Exporting SVG as PNG format

1 Answers1

Linked