Var*_*rma 12 html javascript jquery webpage-screenshot html2canvas
我正在尝试构建一个应用程序,我需要将整个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>
这有助于我在新窗口中打开图像.任何方式直接将其复制到剪贴板而不是从新窗口右键单击上下文菜单,并使其全部适用于混合内容.任何帮助,将不胜感激.
编辑:我得到的代码使用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 结构是别的东西，你可以粘贴它的完整结构。