JSFiddle - React, Tailwind, and code Playground

html2canvas with rasterize HTML content into Canvas (img) and dataURL

by Andrew Pougher

HTML

<script src="http://cburgmer.github.com/rasterizeHTML.js/rasterizeHTML.allinone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<div class="wrap" id="images">
  <p> andrew test</p>
  <div id="capture" class="box">
      <span class="text">TITLE DEMO</span>
      <img src="http://coca-colastore.staging.brandshop.com/images/sac-graphic-bottle.jpg" />
  </div>
  <div class="box paste"></div> 
</div>

CSS

* {
      font-size: 25px;
      margin: 0;
    }
    
    .test {
      color: green;
      border: 2px dashed blue;
      padding: 10px;
    }

JavaScript

$(document).ready(function() {


    html2canvas(document.querySelector("#capture"), {
      //allowTaint:true,
      useCORS: true,
      allowTaint: true,
      background: '#FFFFFF',
      logging: true
    }).then(function(canvas) {
      try {
        var
          html_container = document.getElementById("images"),
          html = html_container.innerHTML;

        /* get html and generate an image in canvas */
        rasterizeHTML.drawHTML(html, canvas);
        console.log(canvas + " <<<<<");
        //

        $('.paste').prepend(canvas);

        var ctx = canvas.getContext('2d');
        console.log(ctx);
        var svgData = btoa(canvas);
        console.log(svgData);
        var html_container = document.getElementById("images"),
          html = html_container.innerHTML;

        rasterizeHTML.drawHTML(html).then(function(renderResult) {
          console.log(btoa(renderResult.svg));
        });

      } catch (e) {
        alert("fuck up")

      };
    });



    $('.text').click(function() {
      alert("")
    });
  });