Konva -导出到高质量的图像和裁剪不需要的舞台区域

Question

目前，当用户单击按钮时，我正在使用下面的图像导出Konva:

export const Demo = () => {
const canvasRef = useRef();
const signature = "Example text";
const onSave = () => {
const data = canvasRef?.current?.toDataURL({
pixelRatio: 2
});
}
return (<>
<Stage
ref={canvasRef}
width={300}
height={40}    >
<Layer>
<Text
text={signature}
verticalAlign="middle"
fillStyle="#FF0000"
fontSize={30}
width={300}
height={40}
/>
</Layer>
</Stage>
<button onClick={onSave}/>
</>)
}

问题是，这将导出Konva舞台的整个区域。是否有一种方法可以导出Konva，我可以从舞台的特定区域获得图像-而不是整个舞台。例如，图像应该只属于我的文本对象。

类似于https://gist.github.com/remy/784508 ?

Answer 1

stage. todataurl()方法有一个配置对象，这里解释为https://konvajs.org/api/Konva.Stage.html#toDataURL__anchor，它允许您从舞台导出目标矩形。

您可以使用此选项来减少用于导出图像的区域周围的多余空间。