Pho*_*nix 2 javascript html2canvas
我有一个显示图形的画布，我正在尝试使用 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() 截取的屏幕截图的图像吗？
尝试这个：
在 HTML 中：
html2canvas.min.js文件。在 JavaScript 中：
capture()函数。capture()函数绑定到 btnclick事件。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)
快速提示：如果您想捕获整个文档/网页，只需在<body>标签中添加“捕获”ID 。
| 归档时间： |
|
| 查看次数： |
4394 次 |
| 最近记录： |