如何用jQuery将图表所在div下载为图片？下载异常求助

我尝试用html2canvas把承载图表的InflationChart div下载为图片，但下载结果和实际图表不一致。

现有HTML代码 #

<a id="downloadImage">
  <img src="~/Content/images/imgae-icon.jpg" alt="" />
</a>
<div id="InflationChart" style="height: 400px;"> </div>
<div id="previewImage" hidden></div>

InflationChart div承载的实际图表显示正常，但执行以下JavaScript代码下载后，图片显示异常。

现有JavaScript代码 #

$("#downloadImage").on('click', function () {
    element = $("#InflationChart");
    html2canvas(element, {
        onrendered: function (canvas) {
            $("#previewImage").append(canvas);
            getCanvas = canvas;
        }
    });
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#downloadImage").attr("download", "image.png").attr("href", newData);
});

问题根源 #

html2canvas是异步执行的，当前代码在html2canvas还没完成canvas渲染、getCanvas还未被正确赋值时，就执行了下载逻辑，导致获取到的是无效的canvas数据，最终下载的图片与实际不符。

修复方案 #

将下载逻辑完全移入onrendered回调函数内部，确保等待canvas渲染完成后再处理下载：

$("#downloadImage").on('click', function () {
    const element = $("#InflationChart");
    html2canvas(element, {
        onrendered: function (canvas) {
            $("#previewImage").append(canvas);
            // 渲染完成后再生成图片数据并触发下载
            const imageData = canvas.toDataURL("image/png");
            const newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
            $("#downloadImage").attr("download", "image.png").attr("href", newData);
            // 手动触发点击完成下载（原点击事件已执行，需重新触发）
            $("#downloadImage")[0].click();
        }
    });
});

额外优化建议 #

• 避免使用全局变量getCanvas，直接使用回调参数传递的canvas对象，避免变量污染和取值错误
• 若使用较新版本的html2canvas，建议使用Promise异步语法（onrendered已被官方废弃）：

$("#downloadImage").on('click', async function () {
    const element = $("#InflationChart");
    try {
        // 等待html2canvas完成截图
        const canvas = await html2canvas(element);
        $("#previewImage").append(canvas);
        // 生成下载链接并触发下载
        const imageData = canvas.toDataURL("image/png");
        const newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#downloadImage").attr("download", "image.png").attr("href", newData);
        $("#downloadImage")[0].click();
    } catch (err) {
        console.error('截图下载失败:', err);
    }
});

内容的提问来源于stack exchange，提问作者Faizan Naeem