html2canvas svg Explorer

by Andrew Maestro

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.12/html2canvas.js"></script>
<div class="visualization">
  <svg width="200" height="200"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       
  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>
</div>

CSS

div.visualization {
   width:1009px;
   height:440px;
   overflow:visible;
   background-color: #fff;
   color:transparent;
}

JavaScript

html2canvas($('div.visualization')[0], {
    useCORS: true,
    logging: true,
    allowTaint: true
  }).then(function (canvas) {
    if (navigator.msSaveBlob) {
      console.log('this is IE');
      var URL=window.URL;
      var BlobBuilder = window.MSBlobBuilder;
      navigator.saveBlob=navigator.msSaveBlob;
      var imgBlob = canvas.msToBlob();
      if (BlobBuilder && navigator.saveBlob) {
        var showSave =  function (data, name, mimetype) {
          var builder = new BlobBuilder();
          builder.append(data);
          var blob = builder.getBlob(mimetype||"application/octet-stream");
          if (!name)
            name = "Download.bin";
          navigator.saveBlob(blob, name);
        };
        showSave(imgBlob, 'barchart.png',"image/png");
      }
    } else {
      if ($('#export-image-container').length == 0)
          $('body').append('<a id="export-image-container" download="barchart.jpg">')
      img = canvas.toDataURL("image/jpeg")
      img = img.replace('data:image/jpeg;base64,', '')
      finalImageSrc = 'data:image/jpeg;base64,' + img

      $('#export-image-container').attr('href', finalImageSrc)
      $('#export-image-container')[0].click()
      $('#export-image-container').remove()
    }
  });