copy/paste base64 images from chart - Javascript highcharts

Javascript examples for highcharts:Chart Image

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Image

Description

copy/paste base64 images from chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div> 
      <button id="add-image">Add image from base64 string</button> 
      <script type="text/javascript">
var chart = Highcharts.chart('container', {
  series: [{/*w w w .  j  a  va 2  s  . c o  m*/
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});
$("#add-image").click(function() {
  var svg = $("#container").find('svg')[0],
    svgSize = svg.getBoundingClientRect(),
    svgData = new XMLSerializer().serializeToString(svg),
    img = document.createElement('img'),
    base64Image = '<img src="data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData))) + '"/>';
  $(base64Image).appendTo('body');
});

      </script>  
   </body>
</html>

Related Tutorials