我试图让html2canvas在点击按钮时生成div及其内容的屏幕截图，但这不起作用，我总是看到消息"文档克隆的、位于7842174的、大小为0x0的元素；，这个尺寸应该是500x500
然而，如果我把代码放在"；jQuery(document(.ready(function((｛"并让它在页面加载时运行，它工作得很好？
页面加载的工作示例
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
var ImageDiv = document.getElementById("_header_left-15-6999");
console.log(ImageDiv);
html2canvas(ImageDiv, {
allowTaint: true,
useCORS: true
}).then(function (canvas) {
document.getElementById("PreviewImage").appendChild(canvas);
});
});
点击无工作示例
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery("#cc-download").on('click', function (e) {
e.preventDefault();
var ImageDiv = document.getElementById("_header_left-15-6999"); // tried standard js and jquery
console.log(ImageDiv);
html2canvas(ImageDiv, {
allowTaint: true,
useCORS: true
}).then(function (canvas) {
document.getElementById("PreviewImage").appendChild(canvas);
});
});
});
唯一的区别是，处理页面加载的版本被包装在jquery on click事件中，除了处理页面加载之外，它不会处理任何其他内容。
页面加载后页面上没有任何变化，它甚至在单击时找到div，但报告为0x0
当我查看console.log(ImageDiv(的输出时；它显示了在两个版本中都应该显示的确切div和里面的元素，但由于某种原因，点击版本仍然将其视为0x0
我已经尝试了无数版本的这种方法，搜索了无数的例子，但我无法在点击时使用jquery，只能在页面加载时使用。
有人有什么建议来找出原因吗？
网站正在使用wordpress，如果这有帮助的话，尽管我怀疑它是否重要。
提前谢谢大家。
问候
Wayne
更新
根据康拉德的要求，以下是控制台中的内容
页面加载后，这是在控制台中
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
/escoot/card-creator/#cc-download:1 Unchecked runtime.lastError: The message port closed before a response was received.
这就是点击后的内容
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
/escoot/card-creator/#cc-download:1 Unchecked runtime.lastError: The message port closed before a response was received.
html2canvas.min.js?ver=6.1:20 #1 0ms Starting document clone with size 1600x495 scrolled to 0,-777
html2canvas.min.js?ver=6.1:20 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write
fn.toIFrame @ html2canvas.min.js?ver=6.1:20
(anonymous) @ html2canvas.min.js?ver=6.1:20
(anonymous) @ html2canvas.min.js?ver=6.1:20
(anonymous) @ html2canvas.min.js?ver=6.1:20
(anonymous) @ html2canvas.min.js?ver=6.1:20
a @ html2canvas.min.js?ver=6.1:20
Js @ html2canvas.min.js?ver=6.1:20
(anonymous) @ html2canvas.min.js?ver=6.1:20
element_to_png @ (index):181
(anonymous) @ (index):176
dispatch @ jquery.min.js?ver=3.6.1:2
y.handle @ jquery.min.js?ver=3.6.1:2
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
jquery.min.js?ver=3.6.1:2 [Violation] 'click' handler took 230ms
[Violation] Forced reflow while executing JavaScript took 32ms
html2canvas.min.js?ver=6.1:20 #1 3352ms Document cloned, element located at 784,1751 with size 0x0 using computed rendering
html2canvas.min.js?ver=6.1:20 #1 3352ms Starting DOM parsing
html2canvas.min.js?ver=6.1:20 #1 3357ms Added image https://www.genbuz.com/escoot/wp-content/uploads/2022/11/card-500x500-wine-grad-1.jpg
html2canvas.min.js?ver=6.1:20 #1 3362ms Starting renderer for element at 784,1751 with size 0x0
html2canvas.min.js?ver=6.1:20 #1 3362ms Canvas renderer initialized (0x0) with scale 1
html2canvas.min.js?ver=6.1:20 #1 3680ms Finished rendering
我还想补充一点，有问题的div是一个粘性div，所以我想这可能是原因吗？
有什么想法吗？
感谢的帮助
经过多次尝试和错误，我发现是chrome扩展hoverify导致了问题，禁用了所有扩展，然后逐个添加，最终找到了原因。
我希望这对将来的某个人有所帮助。
问候
Wayne