html2canvas in IE and Firefox does not read data-title

Question

Using html2canvas i have captured the DIV in the page, in the div have used the data-title attribute and used css to show the content in page. But in IE11 and Firefox the data-title is appended in the image instead of the content.

In chorme it is working fine

window.takeScreenShot = function() {
  html2canvas(document.getElementById("target"), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
    width: 320,
    height: 220
  });
}

.example:before {
  content: attr(data-title) ": ";
}

#target {
  width: 300px;
  height: 200px;
  background: blue;
  color: white;
  padding: 10px;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="example" data-title="sample" id="target"></div>
<button onclick="takeScreenShot()">to image</button>

Fiddle

Is there a way to make it work on both IE and Firefox

Answer 1

I think, the version of html2canvas that you are using is no longer supported. Use this : https://html2canvas.hertzen.com/dist/html2canvas.js

Ref: https://html2canvas.hertzen.com/

html2canvas(document.getElementById('target')).then(canvas => {
    document.body.appendChild(canvas)
});

Fiddle: http://jsfiddle.net/sodofkcs/3829/