我有一个显示图表的 Canvas ，我正在尝试使用 html2canvas() 截取 Canvas 的屏幕截图，代码如下:
<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 并附加 Canvas 的屏幕截图。
如何下载显示的 Canvas 截图？ 我已经尝试使用类似下面的东西来下载图像:
var link = document.createElement('a');
link.download = stx.chart.symbol+".png";
link.href = stx.chart.canvas.toDataURL("png");
link.click();
但它仅将 Canvas 上的数据作为没有背景的图像下载(它不下载屏幕截图，而仅下载数据)，下载后打开时会显示包含数据的黑屏。谁能帮助我直接下载从 html2Canvas() 截取的屏幕截图的图像？
最佳答案
试试这个:
在 HTML 中:
- 为您要截屏的元素提供“捕获”的 ID。
- 提供您需要单击以截取屏幕截图的按钮/元素，ID 为“btn”。
- 加载
html2canvas.min.js文件。
在 Javascript 中:
- 创建
capture()功能。 - 绑定(bind)
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>标记。
关于javascript - 如何使用 html2Canvas 自动下载截图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50351669/