index.html

<html>

<head>

  <!-- HighCharts Dependencies -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.highcharts.com/9.3/highcharts.js"></script>
  <script src="https://code.highcharts.com/9.3/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/9.3/modules/export-data.js"></script>


  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Niramit|Roboto" rel="stylesheet">


  <!-- <script src="../dist/index.js"></script>
    <link href="../dist/vue-2-img.css" rel="stylesheet"> -->
  <!-- <script src="https://unpkg.com/vue-2-img"></script> -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/vue-2-img/dist/vue-2-img.css"> -->

  <style>
    body {
      background: aliceblue;
      font-family: 'Roboto', sans-serif;
    }

    h1,
    h2 {
      font-family: 'Niramit', sans-serif;
    }

    .container {
      background: #fff;
    }

    .chart .poster {
      min-width: 310px;
      width: 100%;
      height: 400px;
      margin: 0 auto;
    }

    .poster {
      height: 400px;
      width: 400px;
      overflow: hidden;
      display: block;
      color: red;
      position: relative;
      background: white;
    }

    .poster .border {
      position: absolute;
      width: 100%;
      height: 100%;
      border: blue solid 10px;
    }

    .poster .black-and-white {
      -webkit-filter: grayscale(1);
      -moz-filter: grayscale(1);
      -ms-filter: grayscale(1);
      filter: grayscale(1);
      opacity: 0.8;
      width: 90%;
      position: absolute;
      top: 5%;
      left: 5%;
      border: white solid 10px;
    }

    .poster h2 {
      position: absolute;
      text-transform: uppercase;
      bottom: 21%;
      left: 10%;
      font-size: 54px;
      font-family: monospace;
      color: #fff;
      letter-spacing: 0.1em;
      z-index: 1;
    }

    .poster h2:before {
      content: " ";
      width: 2em;
      height: 2em;
      border-radius: 50%;
      background: black;
      display: block;
      z-index: -1;
      bottom: -0.5em;
      right: 1.5em;
      position: absolute;
      filter: blur(20px);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col mt-5 mb-5">
        <h1>
          Vue2Img
        </h1>
        <p>
          This JS package aims to truthfully and easily convert anything that is rendered in the browser to a raster
          image for download. It works excellent with HighCharts and other SVG rendered graphics. Initially conceived to
          be a vueJS directive, I'm publishing the first version as a generic JS package to get feedback while building
          a more integrated vue solution. Any feedback is welcome!
        </p>
        <p>
          Project Links:
        <ul>
          <li><a href="https://github.com/FrankFlitton/vue-2-img">Github</a></li>
          <li><a href="https://www.npmjs.com/package/vue-2-img">NPM</a></li>
        </ul>
        </p>
        <p>
          <button class="btn btn-primary" onClick="vue2img.image()">Export page as PNG</button>
          <button class="btn btn-primary" onClick="vue2img.pdf()">Export each chart as a PDF</button>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col mb-5">
        <div class="pageTarget">
          <h1>Bar Chart Example</h1>
          <div class="chart" id="container1"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col mb-5">
        <div class="pageTarget">
          <h1>Pie Chart Example</h1>
          <div class="chart" id="container2"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col mb-5">
        <div class="pageTarget">
          <h1>CSS Poster Example</h1>
          <div class="poster m-auto d-block w-auto">
            <img crossorigin="anonymous" src="./example/example.jpg" alt="Example image" class="black-and-white">
            <div class="border"></div>
            <h2>Poster Example</h2>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Build Chart 1
    $.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json', function (data) {
      Highcharts.chart('container1', {
        chart: {
          zoomType: 'x'
        },
        title: {
          text: 'USD to EUR exchange rate over time'
        },
        subtitle: {
          text: document.ontouchstart === undefined
            ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        },
        xAxis: {
          type: 'datetime'
        },
        yAxis: {
          title: {
            text: 'Exchange rate'
          }
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          area: {
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
              ]
            },
            marker: {
              radius: 2
            },
            lineWidth: 1,
            states: {
              hover: {
                lineWidth: 1
              }
            },
            threshold: null
          }
        },

        series: [{
          type: 'area',
          name: 'USD to EUR',
          data: data
        }]
      })
    }
    )

    // Build Chart 2
    Highcharts.chart('container2', {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Browser market shares in January, 2018'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            },
            connectorColor: 'silver'
          },
          colors: [{
            radialGradient: {
              cx: 0.5,
              cy: 0.3,
              r: 0.7
            },
            stops: [
              [0, Highcharts.Color('#42b983').get('rgb')],
              [1, Highcharts.Color('#42b983').brighten(-0.3).get('rgb')] // darken
            ]
          },
          {
            radialGradient: {
              cx: 0.5,
              cy: 0.3,
              r: 0.7
            },
            stops: [
              [0, Highcharts.Color('#42aaff').get('rgb')],
              [1, Highcharts.Color('#42aaff').brighten(-0.3).get('rgb')] // darken
            ]
          },
          {
            radialGradient: {
              cx: 0.5,
              cy: 0.3,
              r: 0.7
            },
            stops: [
              [0, Highcharts.Color('#AA00FF').get('rgb')],
              [1, Highcharts.Color('#AA00FF').brighten(-0.3).get('rgb')] // darken
            ]
          },
          {
            radialGradient: {
              cx: 0.5,
              cy: 0.3,
              r: 0.7
            },
            stops: [
              [0, Highcharts.Color('#4233ff').get('rgb')],
              [1, Highcharts.Color('#4233ff').brighten(-0.3).get('rgb')] // darken
            ]
          },
          {
            radialGradient: {
              cx: 0.5,
              cy: 0.3,
              r: 0.7
            },
            stops: [
              [0, Highcharts.Color('#ff22aa').get('rgb')],
              [1, Highcharts.Color('#ff22aa').brighten(-0.3).get('rgb')] // darken
            ]
          },
          {
            radialGradient: {
              cx: 0.5,
              cy: 0.3,
              r: 0.7
            },
            stops: [
              [0, Highcharts.Color('#AA0000').get('rgb')],
              [1, Highcharts.Color('#AA0000').brighten(-0.3).get('rgb')] // darken
            ]
          }
          ]
        }
      },
      series: [{
        name: 'Share',
        data: [{
          name: 'Chrome',
          y: 61.41
        },
        {
          name: 'Internet Explorer',
          y: 11.84
        },
        {
          name: 'Firefox',
          y: 10.85
        },
        {
          name: 'Edge',
          y: 4.67
        },
        {
          name: 'Safari',
          y: 4.18
        },
        {
          name: 'Other',
          y: 7.05
        }
        ]
      }]
    })
  </script>
  <script type="module" src="/src/index.ts"></script>
</body>

</html>