我正在尝试构建一个应用程序，在该应用程序中我需要将整个 div 作为图像复制到剪贴板。 div 可以包含嵌套的 div 和图像、svgs 等。
我已经搜索了很多，但无法找到满足我的要求的任何答案。
目前，我可以将其转换为图像并使用以下代码在新选项卡中打开它。但是，只有当 div 中有纯文本时它才有效。当我添加图像时，它失败了。我刚刚复制了黑屏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
function copy() {
var c = document.getElementsByClassName('myclass')[0];
html2canvas(c, {
onrendered: function(canvas) {
theCanvas = canvas;
var image = new Image();
image.id = "pic"
image.src = theCanvas.toDataURL();
image.height = c.clientHeight
image.width = c.clientWidth
window.open(image.src, 'Chart')
}
})
}
</script>
<button onclick='copy()'>Copy</button>
<div class="myclass">
Hi There!!!!!!!!
</div>
</body>
</html>
这可以帮助我在新窗口中打开图像。任何方法都可以直接将其复制到剪贴板，而不是从新窗口右键单击上下文菜单，并使其全部适用于混合内容。任何帮助将不胜感激。
编辑：我得到了与
imgsvg<div>
<div>
some text here
<svg>
<g>...</g>
<g>...</g>
</svg>
<svg>
<g>...</g>
<g>...</g>
</svg>
<div>
some text here
</div>
</div>
</div>
任何让它与所有这些一起工作的想法，以便我得到原样的屏幕截图。 我还希望它能够与 IE、Chrome 和 Firefox 配合使用。我尝试使用 dom-to-image 库，但它不支持 IE。
提前致谢
我已经测试了您的代码，如下所示，它工作正常。
function copy() {
var c = document.getElementsByClassName('myclass')[0];
html2canvas(c, {
onrendered: function(canvas) {
theCanvas = canvas;
var image = new Image();
image.id = "pic"
image.src = theCanvas.toDataURL();
image.height = c.clientHeight
image.width = c.clientWidth
document.getElementById("result").setAttribute("src", image.src)
}
})
}<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
</head>
<body>
<button onclick='copy()'>Copy</button> See image at bottom of page after clicking...
<div class="myclass">
<div class="personal_info_form_group">
<label>First Name*</label>
<input type="text" class="form-control" name="first_name" id="first_name" value="" placeholder="first name" />
</div>
<div class="personal_info_form_group">
<label>Last Name*</label>
<input type="text" class="form-control" name="last_name" id="last_name" value="" placeholder="first name" />
</div>
Hi There!!!!!!!!
<div>
<div>
some text here
<svg>
<g>asndalsnd</g>
<g>sadmlkasd</g>
</svg>
<svg>
<g>sadnkasndkj</g>
<g>asdnasndjsd</g>
</svg>
<div>
some text here
</div>
</div>
</div>
</div>
<img style="border:solid 1px red;" id="result" />
</body>
</html>如果你的html结构是其他的，你能粘贴它的完整结构吗？