React+fabric.js导出Canvas图片遇问题：画布重置、仅导出视口内容

问题分析 #

1. 导出后画布重置 #

原代码通过fabricCanvas.clear()清空画布，再将导出的图片设为背景图，这会丢失画布上所有可编辑的原始对象，导致画布被重置为静态图片状态。

2. 无法导出视口外内容 #

原导出逻辑基于当前画布的视口状态（缩放、平移后的可见区域），没有处理导出全部对象的需求，因此只能捕获屏幕可见部分。

解决方案代码 #

import React, { useEffect, useRef, useState } from 'react';
import { fabric } from 'fabric';

function CanvasComponent() {
  const canvasRef = useRef(null);
  const [fabricCanvas, setFabricCanvas] = useState(null);
  const [zoom, setZoom] = useState(1);

  useEffect(() => {
    const initCanvas = new fabric.Canvas(canvasRef.current);
    setFabricCanvas(initCanvas);

    // 设置画布初始尺寸
    const updateCanvasSize = () => {
      if (initCanvas) {
        const width = window.innerWidth;
        const height = window.innerHeight;
        initCanvas.setWidth(width);
        initCanvas.setHeight(height);
        initCanvas.renderAll();
      }
    };
    updateCanvasSize();

    // 添加测试对象
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 60,
      height: 70
    });

    const circle = new fabric.Circle({
      left: 200,
      top: 200,
      fill: 'green',
      radius: 50
    });

    initCanvas.add(rect, circle);

    // 监听窗口 resize
    window.addEventListener('resize', updateCanvasSize);

    return () => {
      window.removeEventListener('resize', updateCanvasSize);
    };
  }, []);

  useEffect(() => {
    if (fabricCanvas) {
      fabricCanvas.setZoom(zoom);
      fabricCanvas.renderAll();
    }
  }, [zoom, fabricCanvas]);

  const handleExport = () => {
    if (!fabricCanvas) return;

    // 保存当前画布状态：缩放比例、平移位置
    const originalZoom = fabricCanvas.getZoom();
    const originalPan = fabricCanvas.viewportTransform;

    try {
      // 临时重置画布到原始状态（无缩放、无平移）
      fabricCanvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
      fabricCanvas.setZoom(1);

      // 获取所有对象的边界框，确定导出范围（可选）
      const boundingBox = fabricCanvas.getTotalObjectBoundingBox();
      if (!boundingBox) return;

      // 导出整个画布内容（包含所有对象，添加白色背景）
      const dataURL = fabricCanvas.toDataURL({
        format: 'png',
        multiplier: 1, // 可调整为2获取高清图
        backgroundColor: 'white', // 直接设置背景色，无需手动绘制
        // 可选：裁剪到所有对象的边界框，导出仅包含对象的区域
        // left: boundingBox.left,
        // top: boundingBox.top,
        // width: boundingBox.width,
        // height: boundingBox.height
      });

      // 下载图片
      const link = document.createElement('a');
      link.href = dataURL;
      const fileName = `canvas_export_${(Math.random() + 1).toString(36).substring(7)}.png`;
      link.download = fileName;
      link.click();
    } finally {
      // 恢复画布原始状态
      fabricCanvas.setZoom(originalZoom);
      fabricCanvas.setViewportTransform(originalPan);
      fabricCanvas.renderAll();
    }
  };

  return (
    <div>
      <input 
        type="range" 
        min="0.1" 
        max="2" 
        step="0.1" 
        value={zoom} 
        onChange={(e) => setZoom(parseFloat(e.target.value))}
      />
      <button onClick={handleExport}>Export Canvas</button>
      <canvas ref={canvasRef}></canvas>
    </div>
  );
}

export default CanvasComponent;

关键修改点说明 #

1. 解决画布重置问题

   • 不再清空画布或设置背景图，而是保存并恢复画布的原始状态（缩放比例、平移位置）。
   • 导出过程仅临时修改画布视图，完成后立即恢复，保留所有可编辑对象。

2. 解决完整内容导出问题

   • 导出前临时重置画布的缩放和平移到初始状态，确保导出所有对象。
   • 使用Fabric内置的backgroundColor参数添加白色背景，无需手动操作Canvas上下文。
   • 可选：通过getTotalObjectBoundingBox()获取所有对象的边界，可裁剪导出仅包含对象的区域。

3. 代码健壮性优化

   • 添加try...finally确保无论导出是否成功，都会恢复画布原始状态。
   • 增加空值判断，避免潜在报错。

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