【前端可视化】Canvas 下载图片添加背景色因为缩放导致比例不同问题

最新推荐文章于 2025-06-29 22:44:02 发布

原创

最新推荐文章于 2025-06-29 22:44:02 发布 · 466 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章讲述了在canvas元素缩放后如何正确调整背景色的填充范围，使用globalCompositeOperation处理绘制层级，以及利用toDataURL方法生成可下载的图片数据URI，特别提到了JPEG格式的图片质量和命名问题。

比例不同是因为缩放导致的，缩放导致绘图中心发生改变，我们需要把填充的背景色的范围扩大(根据缩放比例来)，同时背景色要绘制在现有画布的后面，防止重叠遮挡。

感觉一个小下载，需要注意的事项还是挺多的，记录下，希望能帮助到其他人，里面的一些 API 请参考 MDN 文档。

下面的参考代码，自己根据自己实际项目需要来修改就行。

// 下载图片
const handleDownloadImg = () => {
  const canvas = document.querySelector('canvas');
  if (!canvas) {
    ElMessage({
      message: '未找到canvas',
      type: 'warning',
    });
    return;
  }
  // 设置背景色
  const ctx = canvas.getContext('2d');
  if (ctx) {
    // 绘制层级问题 globalCompositeOperation：在现有的画布内容后面绘制新的图形
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = mapConfig.backgroundColor;
    // 获取canvas的缩放比例, 用于缩放操作，下面要还原canvas的缩放比例
    const scale = ctx.getTransform().a / 2;
    ctx.fillRect(
      -canvas.width / 2 / scale,
      -canvas.height / 2 / scale,
      canvas.width / scale,
      canvas.height / scale,
    );
  }
  // t