如何使用 html2Canvas 自动下载截图答案

【问题标题】：How to download the screenshot automatically by using html2Canvas如何使用 html2Canvas 自动下载截图
【发布时间】：2018-10-25 08:58:40
【问题描述】：

我有一个显示图表的画布，我正在尝试使用 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() 截取的屏幕截图的图像？

【问题讨论】：

标签： javascript html2canvas

【解决方案1】：

试试这个：

在 HTML 中：

为您要截屏的元素提供“capture”的 ID。
提供您需要单击以截取屏幕截图的按钮/元素，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')
    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)

Here's the JSFiddle

? 快速提示：如果您想捕获整个文档/网页，只需将“捕获”ID 添加到 <body> 标记即可。

【讨论】：

这不会自动下载它。您正在添加一个按钮。这对于具有许多图像的本地作业是无用的。然后，您需要让脚本单击按钮，我猜这是一种解决方法。
@ThickMiddleManager 这会自动下载屏幕截图。按钮只是为了演示而将函数绑定到某个事件的一种方式。这是自动下载屏幕截图的功能。您可以将函数绑定到任何事件，例如页面加载或在这种情况下，单击按钮，然后它仍会自动下载屏幕截图。它适用于任何数量的元素和/或图像。如果要连续下载多个元素的屏幕截图，可以循环运行该函数。它适用于任何本地开发环境。我已经测试过了，它可以工作。

【解决方案2】：

这对我有用：

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下载截图。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果图像有黑色背景，您的图表必须在屏幕上可见。因为 html2canvas 喜欢截图。如果你想转换数据要画布，您必须确保数据出现在屏幕中。

【讨论】：

图片没有背景，使用canvas.toDataURL("png")时只下载数据。如果我在paint中打开保存的png，它会显示白色背景的图像，否则如果我使用查看器直接打开图像，它只会显示黑色背景的图像。这使得读取数据变得更加困难。