Question

使用html2canvas我已经在页面中捕获了DIV，在div中使用了data-title属性并使用了css来显示页面中的内容。但是在IE11和Firefox中，数据标题会附加在图像中而不是内容中。

在chorme中它工作正常

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Fiddle

有没有办法让它适用于IE和Firefox

Answer 1

我认为，不再支持您使用的html2canvas版本。使用此：https://html2canvas.hertzen.com/dist/html2canvas.js

参考：https://html2canvas.hertzen.com/

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

小提琴：http://jsfiddle.net/sodofkcs/3829/

IE和Firefox中的html2canvas不读取数据标题

1 个答案: