我第一次尝试使用html2canvas来将html元素转换为图像。但是，它反而呈现空白图像。下面是一个复制器:
<div id="target">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>
<button onclick="takeScreenShot()">to image</button>
const div = document.createElement(('div'));
div.innerHTML = '<h1>asd</h1>';
document.body.appendChild(div);
window.takeScreenShot = function() {
html2canvas(div, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
JSFiddle
在删除目标div时，它以某种方式正确呈现。知道我做错了什么吗？
您正在尝试获取由JS代码创建的 您应该在 null
更新Fiddle:http://jsfiddle.net/jyhw02a7/1/ null元素的屏幕截图。
TakesCreenShot()函数中创建；
window.takeScreenShot = function() {
const div = document.createElement(('div'));
div.innerHTML = '<h1>asd</h1>';
document.body.appendChild(div);
html2canvas(div, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" integrity="sha512-s/XK4vYVXTGeUSv4bRPOuxSDmDlTedEpMEcAQk0t/FMd9V6ft8iXdwSBxV0eD60c6w/tjotSlKu9J2AAW1ckTA==" crossorigin="anonymous"></script>
<div id="target">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>
<button onclick="takeScreenShot()">to image</button>
匿名用户
const div = document.createElement(('div'));
div.innerHTML = '<h1>asd</h1>';
document.body.appendChild(div);
window.takeScreenShot = function() {
html2canvas(div, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
console.log(canvas);
}
});
}#target{
width:300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" integrity="sha512-s/XK4vYVXTGeUSv4bRPOuxSDmDlTedEpMEcAQk0t/FMd9V6ft8iXdwSBxV0eD60c6w/tjotSlKu9J2AAW1ckTA==" crossorigin="anonymous"></script>
<div id="target">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>
<button onclick="takeScreenShot()">to image</button>
