nverba · July 2, 2022 21:25
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <style type="text/css">
    #img_div { 
      width:450px;
      height:300px;
      border: 1px solid blue;
    }

  </style>

  <script>
    function getImgData(chartContainer) {

      var doc = chartContainer.ownerDocument;
      var canvas = doc.getElementById('canvas')
      var imgData = canvas.toDataURL("image/png");
      return imgData;
    }
    
    function saveAsImg(chartContainer) {
      var imgData = getImgData(chartContainer);
      
      // Replacing the mime-type will force the browser to trigger a download
      // rather than displaying the image in the browser window.
      window.location = imgData.replace("image/png", "image/octet-stream");
    }
    
    function toImg(chartContainer, imgContainer) { 
      var doc = chartContainer.ownerDocument;
      var img = doc.createElement('img');
      img.src = getImgData(chartContainer);
      
      while (imgContainer.firstChild) {
        imgContainer.removeChild(imgContainer.firstChild);
      }
      imgContainer.appendChild(img);
    }
  </script>

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart", "treemap", "geochart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        
        // Line chart
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);
 
        var chart = new google.visualization.LineChart(document.getElementById('line_div'));
        chart.draw(data, { 
          width: 450, 
          height: 300, 
          title: 'Company Performanceings',
          vAxis: { 
            textPosition: 'out',
            x: 20, 
            textStyle: {fontSize: 10}
          }
        });      
      }
    </script>
 </head>
 <body>
 <canvas id="canvas" style="border:2px solid black;" width="450" height="300"></canvas>

 <script>
  function loadMyImg () {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var rawsvg = document.getElementsByTagName('svg')[0];
    rawsvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

    var data = rawsvg.parentNode.innerHTML;
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;
  };

 </script>
  <br><button onclick="loadMyImg()">Load Image</button>
  <div id="img_div"></div>
  <button onclick="toImg(document.getElementById('line_div'), document.getElementById('img_div'));">Convert to image</button>

  <br><div id="line_div"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	#img_div {
	width:450px;
	height:300px;
	border: 1px solid blue;
	}

	</style>

	<script>
	function getImgData(chartContainer) {

	var doc = chartContainer.ownerDocument;
	var canvas = doc.getElementById('canvas')
	var imgData = canvas.toDataURL("image/png");
	return imgData;
	}

	function saveAsImg(chartContainer) {
	var imgData = getImgData(chartContainer);

	// Replacing the mime-type will force the browser to trigger a download
	// rather than displaying the image in the browser window.
	window.location = imgData.replace("image/png", "image/octet-stream");
	}

	function toImg(chartContainer, imgContainer) {
	var doc = chartContainer.ownerDocument;
	var img = doc.createElement('img');
	img.src = getImgData(chartContainer);

	while (imgContainer.firstChild) {
	imgContainer.removeChild(imgContainer.firstChild);
	}
	imgContainer.appendChild(img);
	}
	</script>

	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart", "treemap", "geochart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {

	// Line chart
	data = new google.visualization.DataTable();
	data.addColumn('string', 'Year');
	data.addColumn('number', 'Sales');
	data.addColumn('number', 'Expenses');
	data.addRows(4);
	data.setValue(0, 0, '2004');
	data.setValue(0, 1, 1000);
	data.setValue(0, 2, 400);
	data.setValue(1, 0, '2005');
	data.setValue(1, 1, 1170);
	data.setValue(1, 2, 460);
	data.setValue(2, 0, '2006');
	data.setValue(2, 1, 860);
	data.setValue(2, 2, 580);
	data.setValue(3, 0, '2007');
	data.setValue(3, 1, 1030);
	data.setValue(3, 2, 540);

	var chart = new google.visualization.LineChart(document.getElementById('line_div'));
	chart.draw(data, {
	width: 450,
	height: 300,
	title: 'Company Performanceings',
	vAxis: {
	textPosition: 'out',
	x: 20,
	textStyle: {fontSize: 10}
	}
	});
	}
	</script>
	</head>
	<body>
	<canvas id="canvas" style="border:2px solid black;" width="450" height="300"></canvas>

	<script>
	function loadMyImg () {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	var rawsvg = document.getElementsByTagName('svg')[0];
	rawsvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

	var data = rawsvg.parentNode.innerHTML;
	var DOMURL = self.URL \|\| self.webkitURL \|\| self;
	var img = new Image();
	var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
	var url = DOMURL.createObjectURL(svg);
	img.onload = function() {
	ctx.drawImage(img, 0, 0);
	DOMURL.revokeObjectURL(url);
	};
	img.src = url;
	};

	</script>
	<br><button onclick="loadMyImg()">Load Image</button>
	<div id="img_div"></div>
	<button onclick="toImg(document.getElementById('line_div'), document.getElementById('img_div'));">Convert to image</button>

	<br><div id="line_div"></div>
	</body>
	</html>