如何使用html2Canvas自动下载屏幕截图

Question

如何使用html2Canvas自动下载屏幕截图

4

我有一个显示图表的画布，我正在尝试使用以下代码使用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并追加canvas的截图。

我怎样才能下载显示出来的canvas截图呢？我已经尝试使用以下内容下载图片：

var link = document.createElement('a');
link.download = stx.chart.symbol+".png";
link.href = stx.chart.canvas.toDataURL("png");
link.click();

但它只会将画布上的数据作为图像下载，而不包括背景（它不会下载屏幕截图，只下载数据），当下载后打开时，会显示一个带有数据的黑色屏幕。有人能帮我直接从html2Canvas()中获取屏幕截图并下载图像吗？

- Phoenix

4个回答

0

如果图片有黑色背景，则您的图表必须在屏幕上可见，因为html2canvas类似于截屏。如果您想将数据转换为画布，则必须确保数据出现在屏幕上。

- İsa Baş

当我使用canvas.toDataURL("png")时，图像没有背景，只有数据被下载。如果我在画图中打开保存的png文件，则会显示带有白色背景的图像；但是，如果我直接使用查看器打开图像，则只显示带有黑色背景的图像，这使得读取数据更加困难。 - Phoenix

0

这对我有用：

HTML

<div id="canvasDiv">
    <canvas id="canvas" height="100" width="100">
        Your browser does not support the HTML canvas tag.
    </canvas>
 </div>
<button onclick="screenShot()" type="button">Take a screenshot</button>

JavaScript

function screenShot(){
    html2canvas(document.querySelector("#canvasDiv")).then(canvas => {
        var dataURL = canvas.toDataURL( "image/png" );
        var data = atob( dataURL.substring( "data:image/png;base64,".length ) ),
            asArray = new Uint8Array(data.length);

        for( var i = 0, len = data.length; i < len; ++i ) {
            asArray[i] = data.charCodeAt(i);    
        }

        var blob = new Blob( [ asArray.buffer ], {type: "image/png"} );
        saveAs(blob, "photo.png");
    });
}

我刚刚使用了html2canvas网站提供的代码，然后我使用了this code来下载屏幕截图。

- Ricardo Loor

0

如果有人在使用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>

- ospider

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ludolfyn · Accepted Answer

试试这个：

在 HTML 中：

给你想要截图的元素，添加一个 ID 为“capture”。
给你需要点击以进行截图的按钮/元素，添加一个 ID 为“btn”。
加载 html2canvas.min.js 文件。

在 JavaScript 中：

创建 capture() 函数。
将 capture() 函数绑定到你正在使用的任何事件上——在这种情况下是在 btn 的 click 事件上。
完成！当你点击 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') // Select the element you want to capture. Select the <body> element to capture full page.
    html2canvas(captureElement)
        .then(canvas => {
            canvas.style.display = 'none'
            document.body.appendChild(canvas)
            return canvas
        })
        .then(canvas => {
            const image = canvas.toDataURL('image/png')
            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)

这是JSFiddle的链接

小贴士：如果你想要捕获整个文档/网页，只需将“capture”ID添加到<body>标签即可。