我在尝试构建一个应用程序,其中需要将整个div作为图片复制到剪贴板中。该div可能包含嵌套的div、图像、svg等。
我已经搜索了很多,但无法找到符合我的要求的答案。
目前,我可以使用以下代码将其转换为图像并在新标签页中打开。然而,只有当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>
这有助于我在新窗口中打开图像。有没有直接将其复制到剪贴板而不是从新窗口的右键上下文菜单中复制,并使其与混合内容一起工作的方法。任何帮助都将不胜感激。
编辑:我已经让代码可以在本地服务器上托管的img
标签上工作,并且还使其可以与svg
元素一起工作。但我的应用程序具有以下混合标记:
<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。提前致谢
<div>
的完整html
吗? - guest271314