Question

我有一个显示图形的画布，我正在尝试使用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（）获取截图的图片吗？

Answer 1

如果图像中有黑色背景，则您的图表必须在屏幕上可见。因为html2canvas就像截图一样。如果要转换数据对于画布，您必须确保数据显示在屏幕上。

Answer 2

这对我有用

HTML：

<button id="btn">Capture</button>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

Javascript：

const capture = () => {
  const body = document.querySelector('body');
  body.id = 'capture';
  html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
  }).then(() => {
    var canvas = document.querySelector('canvas');
    canvas.style.display = 'none';
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    var a = document.createElement("a");
    a.setAttribute('download', 'myImage.png');
    a.setAttribute('href', image);
    a.click();
  });
};

const btn = document.getElementById('btn');
btn.addEventListener('click', capture)

Here's the JSFiddle

我知道已经有一段时间了，但是希望可以对某人有所帮助：）

Answer 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>

Answer 4

这对我有用：

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

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

4 个答案: