Transform svg to png with image tag to get Base64 - Javascript Canvas

Javascript examples for Canvas:image

  1. HOME
  2. Javascript
  3. Canvas
  4. image

Description

Transform svg to png with image tag to get Base64

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//www.j a  v a  2s.  co  m
var ctx = $("#canvas")[0];
var img = new Image;
img.width = 100; img.height = 100;
img.onload = function() {
  ctx.getContext("2d").drawImage(this
,0, 0, this.width, this.height);
    console.log($("#canvas")[0].toDataURL())
};
img.src = $("svg").find("image").attr("xlink:href");
    });

      </script> 
   </head> 
   <body> 
      <svg height="100" width="100" id="asd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> 
         <image id="testimg1" xlink:href="https://www.java2s.com/style/demo/Opera.png" width="100" height="100" x="0" y="0" /> 
      </svg> 
      <canvas id="canvas" width="100" height="100"></canvas>  
   </body>
</html>

Related Tutorials