如何使用html2Canvas自动下载屏幕截图
如何使用html2Canvas自动下载屏幕截图
提问于 2018-05-15 13:35:32
我有一个画布，它显示了一个图形，我试图使用html2canvas()来截图画布，下面的代码如下：
<div class="chartContainer" id="chart1"></div>
<div id="displayCanvas" style="display:none;" class="stx-dialog"></div>
html2canvas($('#chart1'),{onrendered:function(canvas1)
{$('#displayCanvas').append(canvas1)}});在这里，当加载图表容器时，它使用带有id "displayCanvas“的div并附加画布的屏幕截图。
如何下载所显示的画布的屏幕截图?我已经尝试过使用下面这样的方法下载图像：
var link = document.createElement('a');
link.download = stx.chart.symbol+".png";
link.href = stx.chart.canvas.toDataURL("png");
link.click();但是它只下载画布上的数据作为没有背景的图像(它不下载屏幕截图，而是只下载数据)，下载后打开时显示一个包含数据的黑屏。有人能帮助我如何直接下载从html2Canvas()获取的屏幕截图的图像吗？
回答 4
Stack Overflow用户
发布于 2019-06-11 06:32:50
尝试如下：
在HTML中：
- 给出你想要截图的元素，一个“捕获”的ID。
- 提供您需要单击的按钮/元素以获取屏幕快照，ID为"btn“。
- 加载
html2canvas.min.js文件。
在Javascript中：
- 创建
capture()函数。 - 将
capture()函数绑定到您正在使用的任何事件--在本例中，它位于btnclick事件上。 - 完成了！当你点击btn的时候，注意魔法的发生。
HTML：
<h1 id="capture">Hellooooo</h1>
<button id="btn">Capture</button>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>Javascript：
function capture() {
const captureElement = document.querySelector('#capture')
html2canvas(captureElement)
.then(canvas => {
canvas.style.display = 'none'
document.body.appendChild(canvas)
return canvas
})
.then(canvas => {
const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
const a = document.createElement('a')
a.setAttribute('download', 'my-image.png')
a.setAttribute('href', image)
a.click()
canvas.remove()
})
}
const btn = document.querySelector('#btn')
btn.addEventListener('click', capture)快速提示:如果您想捕获整个文档/网页，那么只需将“捕获”ID添加到<body>标记中即可。
Stack Overflow用户
发布于 2018-05-15 13:52:42
如果图像上有黑色背景，您的图表必须在屏幕上可见。因为html2canvas喜欢截图。如果要将数据转换为画布，则必须确保数据出现在屏幕上。
Stack Overflow用户
发布于 2020-09-23 03:38:05
如果有人在使用React，下面是一些您可以复制的代码：
async function download() {
const canvas = await html2canvas(document.querySelector("#screenshot"));
canvas.style.display = "none";
document.body.appendChild(canvas);
const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
const a = document.createElement("a");
a.setAttribute("download", `info.png`);
a.setAttribute("href", image);
a.click();
}
<a href="#" onClick={() => download()}>Download</a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50351669
复制相关文章
相似问题
腾讯云开发者
