JSFiddle - React, Tailwind, and code Playground

by sbrickner

HTML

<script src="http://eligrey.com/demos/FileSaver.js/FileSaver.js"></script>
<script src="https://bendol212.googlecode.com/files/canvas-to-blob.min.js"></script>
<button id='download-button'>Download</button>
<svg id="bar-chart" width="100%" height="640">
      <style>
	.wrapper { font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
	.axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }
	.x.axis path { display: none; }
      </style>
    <g class="wrapper" transform="translate(60,30)"><g class="x axis" transform="translate(0,560)"><g class="tick" transform="translate(101.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">Very Comfortable</text></g><g class="tick" transform="translate(284.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">Somewhat Comfortable</text></g><g class="tick" transform="translate(467.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">Not Very Comfortable</text></g><g class="tick" transform="translate(650.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">Not at All Comfortable</text></g><path class="domain" d="M0,6V0H751V6"></path></g><g class="y axis"><g class="tick" transform="translate(0,560)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">0%</text></g><g class="tick" transform="translate(0,484.52173913043475)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">5%</text></g><g class="tick" transform="translate(0,409.04347826086956)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">10%</text></g><g class="tick" transform="translate(0,333.5652173913044)" style="opacity: 1;"><line x2="-6" y2="0"></line><text...

JavaScript

$('#download-button').on('click', function(e) {
    e.preventDefault();
    var chart = $('#bar-chart')
        .attr('xmlns', 'http://www.w3.org/2000/svg');
    var width = chart.width();
    var height = chart.height();
    var data = new XMLSerializer().serializeToString(chart.get(0));
    var svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
    var url = URL.createObjectURL(svg);
    
    var img = $('<img />')
        .width(width)
        .height(height)
        .on('load', function() {
            var canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img.get(0), 0, 0);
            canvas.toBlob(function(blob) {
                saveAs(blob, "test.png");
            });
        });
    img.attr('src', url);
});