Konva导出高质量图片：如何裁剪舞台多余区域仅保留特定对象？

要实现仅导出舞台中特定元素（比如示例里的Text对象），可以通过获取目标元素的位置与尺寸，在调用toDataURL时指定裁剪区域来实现，具体修改如下：

修改后的代码 #

import { useRef } from 'react';
import { Stage, Layer, Text } from 'react-konva';

export const Demo = () => {
  const canvasRef = useRef();
  const textRef = useRef(); // 新增Text元素的ref
  const signature = "Example text";

  const onSave = () => {
    const textNode = textRef.current;
    if (!textNode || !canvasRef.current) return;

    // 获取Text元素相对于Stage的边界信息
    const rect = textNode.getClientRect();
    // 调用toDataURL时指定裁剪区域，同时保留pixelRatio设置
    const data = canvasRef.current.toDataURL({
      pixelRatio: 2,
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height
    });

    // 可添加导出后的下载逻辑
    const link = document.createElement('a');
    link.download = 'signature.png';
    link.href = data;
    link.click();
  }

  return (<>
    <Stage
      ref={canvasRef}
      width={300}
      height={40}    
    >
      <Layer>
        <Text
          ref={textRef} // 绑定ref到Text元素
          text={signature}
          verticalAlign="middle"
          fill="#FF0000"
          fontSize={30}
          width={300}
          height={40}
        />
      </Layer>
    </Stage>
    <button onClick={onSave}>导出文本区域</button>
  </>)
}

关键说明 #

• 绑定元素Ref：给需要导出的Text元素添加ref，用于后续获取它的位置与尺寸信息。
• 获取边界矩形：通过Konva元素的getClientRect()方法，拿到元素相对于Stage的坐标（x、y）和宽高（width、height），该方法会自动计算元素的实际渲染区域，包括字体的真实占用空间。
• 指定裁剪区域导出：在toDataURL的配置参数中传入裁剪区域的坐标和尺寸，Konva会自动裁剪对应区域并导出图片，同时保留pixelRatio:2保证导出图片的清晰度。

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