当前位置：首页 > JavaScript 项目实战 > 怎么将 Chart.js 图表导出为 PNG 或 JPG 图片

怎么将 Chart.js 图表导出为 PNG 或 JPG 图片

作者：页面旅途时间：2026-11-03 14:12:16浏览：204

详细介绍如何使用 Chart.js 原生 API 与 HTML5 Canvas 导出 PNG 和 JPG 格式图片，包含白底背景处理、动画未完成导出空白的处理技巧与完整代码。

适用版本：Chart.js v2 / v3 / v4 运行环境：现代标准浏览器 / HTML5 Canvas 主题：数据可视化与图像导出
怎么将 Chart.js 图表导出为 PNG 或 JPG 图片
图表导出示意：从浏览器 Canvas 提取像素并转存为 PNG 或 JPG 文件
将 Chart.js 图表导出为 PNG 或 JPG 的核心路径，是借助 Chart.js 实例提供的 toBase64Image() 方法或底层 Canvas 的 toDataURL() 方法生成 Base64 数据串，再通过模拟创建带有 download 属性的超链接触发浏览器本地保存。PNG 格式可直接导出透明底图片；而导出 JPG 格式时，因格式本身不支持透明通道，必须通过自定义插件预先为 Canvas 填充纯白底色，避免背景变成黑色。

一、核心机制：Chart.js 是如何转为图片的

Chart.js 的底层是基于 HTML5 的 <canvas> 元素进行位图渲染。无论是柱状图、折线图还是饼图，当图表被绘制完毕后，所有元素都以像素形式保存在浏览器的图形显存中。这为导出图片提供了直接的技术基础：不需要服务器端协助渲染，前端自身即可直接把当前画布的像素数据编码导出。

将这些像素保存到用户本地计算机，整个过程通常由三步构成：首先由实例或画布提取图像的 Data URL 字符串，其次构造一个临时内存超链接节点并指定目标文件名，最后执行点击并销毁临时节点。

怎么将 Chart.js 图表导出为 PNG 或 JPG 图片
图 1：Chart.js 导出图像的完整链路流向

二、使用 toBase64Image 导出 PNG 图片

Chart.js 官方实例对象内置了便捷的 toBase64Image() API。在不传递任何参数的情况下，该方法默认将图表编码为标准 PNG 格式的 Base64 字符串（data:image/png;base64,...）。

1. 触发下载的通用辅助函数

获取到 Base64 字符串后，我们需要一个轻量的 JavaScript 函数，通过在内存中创建临时的 <a> 标签并触发点击动作来激活浏览器的另存为机制： 

/**
 * 触发浏览器本地下载指定的 Base64 图像
 * @param {string} dataUrl - Base64 格式的图像数据
 * @param {string} filename - 下载保存的文件名
 */
function downloadDataUrl(dataUrl, filename) {
  // 1. 创建临时的超链接元素
  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = filename;

  // 2. 将节点挂载至 DOM 并模拟用户点击
  document.body.appendChild(link);
  link.click();

  // 3. 及时清理 DOM 节点，避免内存残留
  document.body.removeChild(link);
}

2. 执行导出 PNG 操作

假设你已经初始化了名为 myChart 的图表实例，当用户点击页面上的“导出 PNG”按钮时，只需调用以下逻辑： 

// 绑定导出按钮事件
document.getElementById('export-png-btn').addEventListener('click', () => {
  if (!myChart) {
    console.error('图表实例尚未准备就绪');
    return;
  }
  // 获取 PNG 格式的 Base64 字符串（无损透明格式）
  const imagePNG = myChart.toBase64Image();
  
  // 触发本地保存
  downloadDataUrl(imagePNG, 'chart-export.png');
});
怎么将 Chart.js 图表导出为 PNG 或 JPG 图片
图 2：导出图片不可或缺的四个关键步骤

三、导出 JPG 图片及“黑底问题”解决

虽然 toBase64Image('image/jpeg', 0.92) 允许传入 MIME 类型和质量参数（0 到 1 之间），但直接导出 JPG 经常会遇到一个严重的坑：导出的 JPG 背景全部变成了纯黑色。

出现该问题的原因在于：HTML5 <canvas> 在默认状态下的背景是完全透明的（RGBA 中的 Alpha 为 0）。PNG 格式原生支持 Alpha 通道，能够正确展现透明度；而 JPG 格式规范完全不支持透明度，当底层 Canvas 将包含透明区域的位图压缩编码为 JPG 时，所有透明像素会自动被解释填充为黑色 #000000。

怎么将 Chart.js 图表导出为 PNG 或 JPG 图片
图 3：未加白底与已加白底导出 JPG 的实际效果对比

解决黑底：使用自定义插件绘制纯白背景

在 Chart.js 中，最稳妥的解决方案是利用插件钩子 beforeDraw，在所有数据集和网格线渲染之前，先在整个画布上下文绘制一层纯白色矩形。 

// 1. 声明纯白背景插件
const whiteBackgroundPlugin = {
  id: 'customCanvasBackgroundColor',
  beforeDraw: (chart, args, options) => {
    const { ctx } = chart;
    ctx.save();
    ctx.globalCompositeOperation = 'destination-over'; // 确保背景绘制在最底层
    ctx.fillStyle = options.color || '#FFFFFF';        // 填充白色底色
    ctx.fillRect(0, 0, chart.width, chart.height);
    ctx.restore();
  }
};

// 2. 初始化图表时挂载该插件
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: { /* 你的图表数据 */ },
  options: {
    plugins: {
      customCanvasBackgroundColor: {
        color: '#FFFFFF', // 自定义背景为纯白
      }
    }
  },
  plugins: [whiteBackgroundPlugin] // 注册插件
});

执行导出 JPG 操作

完成了白底插件的配置后，调用 toBase64Image('image/jpeg', 0.9) 即可导出色彩鲜明、背景为干净白色的标准 JPG 图片： 

document.getElementById('export-jpg-btn').addEventListener('click', () => {
  // 传参 'image/jpeg'，第二个参数为压缩质量（0.1 ~ 1.0）
  const imageJPG = myChart.toBase64Image('image/jpeg', 0.92);
  downloadDataUrl(imageJPG, 'chart-export.jpg');
});

四、关键避坑：防止导出动画未完成的空白或半截图

初学者在实现自动化导出或页面加载即导出的功能时，常常会发现导出的图片只有坐标轴，或者柱状图只绘制了一半。

这是因为 Chart.js 默认开启了入场动画（持续时间一般为 500ms ~ 1000ms）。如果在调用 new Chart() 后的同一同步事件循环中直接调用 toBase64Image()，图表渲染引擎才刚刚开始运行，Canvas 上还没有完成全部图形的绘制。

注意事项：切忌在实例化代码之后立刻执行同步导出。如果要自动化静默导出，必须使用 animation.onComplete 回调。

方案 A：在动画完全结束的生命周期钩子中导出

const myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    animation: {
      onComplete: () => {
        // 动画完全结束时的回调，确保拿到完整的图像帧
        console.log('图表已完成渲染，可安全导出完整图片');
      }
    }
  }
});

方案 B：针对截图场景直接关闭动画

如果当前页面或弹窗专门用于图像报表下载，可以直接设置 animation: false。此时图表在调用构造函数的同时即刻完成全量绘制，随后即可安全同步导出。

五、进阶优化：提升导出图片的高清分辨率（Retina / 打印级）

在网页端直接呈现的图表通常受限于 CSS 显示容器的宽度（例如 600px 宽度）。如果直接将这个画布导出，放入 Word 文档或 PPT 投影时文字和线条会显得模糊。

Chart.js 允许在配置中指定 devicePixelRatio 属性。默认情况下它采用浏览器的 window.devicePixelRatio（普通屏幕为 1，Retina 屏幕为 2）。若需要导出 2 倍或 3 倍超高精度的大图，可以在配置中显式提升该比例： 

const highResChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    responsive: true,
    // 强制将画布缩放比设定为 3 倍，生成高像素密度图像
    devicePixelRatio: 3
  }
});

六、格式对比与技术选型矩阵

对比维度 PNG 格式 JPG 格式
压缩方式 无损压缩（Lossless） 有损压缩（Lossy，可控质量）
透明通道 原生支持 Alpha 透明度 不支持透明（必须加白底）
图形呈现效果 文字锐利、线条边缘清晰无噪点 文件体积小，但文字边缘可能出现轻微伪影
推荐使用场景 后台报表、PPT 图表插图、深浅主题切换网页 移动端大图传输、邮件内嵌附件、对体积有严格要求的场景
方法调用 toBase64Image() toBase64Image('image/jpeg', 0.9)
怎么将 Chart.js 图表导出为 PNG 或 JPG 图片
图 4：Chart.js 导出功能技术选型与上线检查清单

七、完整可运行示例代码

以下是整合了图表构建、白色底色填充、按钮事件监听和文件自动下载的完整 HTML 演示代码。复制保存为 .html 文件后在浏览器中打开即可直接运行验证： 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Chart.js 图片导出演示</title>
  <!-- 引入 Chart.js CDN 资源 -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body { font-family: sans-serif; padding: 24px; }
    .chart-box { width: 640px; margin-bottom: 20px; }
    button { padding: 8px 16px; margin-right: 12px; cursor: pointer; }
  </style>
</head>
<body>

  <div class="chart-box">
    <canvas id="exportCanvas"></canvas>
  </div>

  <div>
    <button id="btnPng">导出为 PNG 图片</button>
    <button id="btnJpg">导出为 JPG 图片</button>
  </div>

  <script>
    // 1. 白底插件：解决 JPG 默认黑底问题
    const whiteBackgroundPlugin = {
      id: 'customCanvasBackgroundColor',
      beforeDraw: (chart, args, options) => {
        const { ctx } = chart;
        ctx.save();
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = options.color || '#FFFFFF';
        ctx.fillRect(0, 0, chart.width, chart.height);
        ctx.restore();
      }
    };

    // 2. 初始化图表
    const ctx = document.getElementById('exportCanvas').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['第一季度', '第二季度', '第三季度', '第四季度'],
        datasets: [{
          label: '营收额 (万元)',
          data: [120, 190, 300, 250],
          backgroundColor: '#477DAD'
        }]
      },
      options: {
        responsive: true,
        plugins: {
          customCanvasBackgroundColor: {
            color: '#FFFFFF'
          }
        }
      },
      plugins: [whiteBackgroundPlugin]
    });

    // 3. 辅助下载函数
    function saveChartImage(dataUrl, filename) {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    // 4. 绑定导出动作
    document.getElementById('btnPng').addEventListener('click', () => {
      const pngUrl = myChart.toBase64Image('image/png', 1.0);
      saveChartImage(pngUrl, 'sales-report.png');
    });

    document.getElementById('btnJpg').addEventListener('click', () => {
      const jpgUrl = myChart.toBase64Image('image/jpeg', 0.92);
      saveChartImage(jpgUrl, 'sales-report.jpg');
    });
  </script>
</body>
</html>
作者最新文章

JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑

2026-11-05 16:19:37

JavaScript怎么读写LocalStorage与SessionStorage

2026-11-05 15:40:11

anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库

2026-11-05 11:24:55

flv.js 与 hls.js 在直播场景下的选型对比

2026-11-05 08:18:52

JavaScript能做什么？前端开发中的作用与应用场景解析

2026-11-04 23:17:54

相关文章
更多