如何在Konva.js导出图片时隐藏调整尺寸边框线

调整尺寸边框属于交互辅助元素，通常是Konva.Transformer实例或者自定义绘制的辅助线节点，默认会随画布内容一起被stage.toDataURL()渲染导出，可通过以下两种方案解决：

方案1：导出时过滤辅助节点（推荐，无状态改动） #

stage.toDataURL()支持传入filter配置项，在渲染导出内容时直接跳过指定类型的节点，不需要修改元素原有显示状态，代码侵入性最低：

• 如果使用官方Konva.Transformer实现调整尺寸功能，直接过滤Transformer类节点即可：

const exportImgUrl = stage.toDataURL({
  mimeType: 'image/png',
  pixelRatio: 2, // 可配置导出分辨率，避免导出图片模糊
  filter: (node) => {
    // 返回false表示该节点不参与导出渲染
    return node.className !== 'Transformer';
  }
});

• 如果是自定义实现的调整边框/辅助线，可提前给所有辅助元素设置统一标识名name: 'resize-helper'，再按名称过滤：

const exportImgUrl = stage.toDataURL({
  mimeType: 'image/png',
  pixelRatio: 2,
  filter: (node) => {
    return !node.hasName('resize-helper');
  }
});

方案2：导出前临时隐藏辅助元素 #

如果使用的Konva版本较低不支持filter配置，可在导出前临时隐藏所有调整边框节点，导出完成后再恢复显示，不影响后续交互：

// 查找所有Transformer实例
const resizeHelpers = stage.find('Transformer');
// 临时隐藏
resizeHelpers.forEach(node => node.visible(false));
// 执行导出
const exportImgUrl = stage.toDataURL({
  mimeType: 'image/png',
  pixelRatio: 2
});
// 恢复显示
resizeHelpers.forEach(node => node.visible(true));

注意：请勿为了导出效果直接删除调整边框节点，会导致后续拖放、尺寸调整交互失效。

内容的提问来源于stack exchange，提问作者מיכאל ברגינסקי