html2canvas example

how to use html2canvas

by robotsgoboop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="target">
    <table border="0" cellpadding="0" cellspacing="0" style="text-align:center" width="100%">
   <tbody>
    <tr>
     <td></td>
    </tr>
    <tr>
     <td align="center">
      <div> 
       <div align="center" style="background-color: rgb(99, 99, 99);"> 
        <div align="center" style="max-width: 614px; margin-left: auto; margin-right: auto; background-color: rgb(99, 99, 99);"> 
         <table border="0" cellpadding="0" cellspacing="0" class="MainWidth" style="margin-left: auto; margin-right: auto; background-color: rgb(99, 99, 99);" width="100%"> 
          <tbody>
           <tr> 
            <td class="MainSide"><img alt="" border="0" height="5" hspace="0" src="https://static.ctctcdn.com/letters/images/1101116784221/S.gif" vspace="0" width="1"></td> 
            <td align="center" class="MainCenter" valign="top" width="612"> 
             <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
              <tbody>
               <tr> 
                <td align="left" style="padding: 10px 5px 10px 5px;" valign="top"> 
                 <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
                  <tbody>
                   <tr> 
                    <td align="left" style="padding: 1px; background-color: rgb(54, 73, 95);" valign="top"> 
                     <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
                      <tbody>
                       <tr> 
                        <td align="center" class="MobileOuterPadding" style="padding: 10px 0px; background-color: rgb(255, 255, 255);" valign="top" width="100%"> 
                         <div class="ui-sortable" style="position: relative;">
                          <table border="0" cellpadding="0" cellspacing="0" class="galileo-ap-layout-editor" width="100%"> 
                           <tbody>
                            <tr> 
    ...

CSS

#targetf{
    width:300px;
    background:blue;
    color:#fff;
    padding:10px;
}

button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
}

#scaled{
  width:150px;
}

#canvasContainer {
  width: 150px;
  height: 220px;
  overflow: hidden;
}
#canvasContainer canvas{
  width:150px;
}

JavaScript

window.takeScreenShot = function() {
		function getBase64FromImageUrl(image, screenshot) {
        var img = new Image();

        //img.setAttribute('crossOrigin', 'anonymous');

        img.onload = function () {
            //var canvas = document.createElement("canvas");
            //canvas.width =this.width;
            //canvas.height =this.height;

            //var ctx = canvas.getContext("2d");
            //ctx.drawImage(this, 0, 0);

            //var dataURL = canvas.toDataURL("image/png");
            
						//image.src = dataUrl;
            
            document.body.appendChild(screenshot);
        		document.getElementById("scaled").src = canvas.toDataURL();
        };

        //img.src = image.src;
    }
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
        		document.body.appendChild(canvas);
            document.getElementById("canvasContainer").appendChild(canvas);
            document.getElementById("scaled").src = canvas.toDataURL();
        },
        taintTest: false,
        allowTaint: true
    });
}

window.testBase64 = function() {
  var xmlHTTP = new XMLHttpRequest();
  xmlHTTP.open('GET', "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", true);
  xmlHTTP.responseType = 'arraybuffer';
  xmlHTTP.onload = function(e) {
    var arr = new Uint8Array(this.response);
    var raw = String.fromCharCode.apply(null,arr);
    var b64 = base64.encode(raw);
    var dataURL="data:image/png;base64," + b64;
    console.log(dataURL);
  };
  xmlHTTP.send();
}