我正在尝试构建一个应用程序，我需要在其中将整个 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。
提前致谢
最佳答案
我已经按如下方式测试了您的代码，它运行良好。
<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>
<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">
<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>
</body>
如果你是 html 结构是别的东西，你可以粘贴它的完整结构。
关于javascript - 将混合内容的 Div 作为图像复制到剪贴板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41440762/