React-konva缩放图片后toDataUrl导出异常问题求助

问题根源在于直接调用Stage的toDataURL()时，默认会导出当前视口缩放后的内容。不用额外创建画布，直接利用Konva的导出参数就能搞定：

• 调用stage.toDataURL()时，传入scale和size参数，强制导出原始尺寸的内容：

// 假设原始图片尺寸是1400x1400
const originalWidth = 1400;
const originalHeight = 1400;

const dataUrl = stage.toDataURL({
  // 指定导出的尺寸为原始尺寸
  width: originalWidth,
  height: originalHeight,
  // 缩放比例设为1，抵消当前Stage的缩放影响
  scale: { x: 1, y: 1 }
});

• 如果原始尺寸是动态获取的（比如从Konva.Image节点读取），可以这样处理：

const imageNode = stage.findOne('Image'); // 获取图片节点
const originalWidth = imageNode.width();
const originalHeight = imageNode.height();

// 用上述参数执行导出
const dataUrl = stage.toDataURL({
  width: originalWidth,
  height: originalHeight,
  scale: { x: 1, y: 1 }
});

这个方案无需额外渲染画布，直接利用Konva内置的导出逻辑，处理大图时性能也不受影响——Konva会按指定尺寸后台渲染导出，不需要在页面上显示原始大小的内容。

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