前端使用 Konva 实现可视化设计器（9）- 另存为SVG

请大家动动小手，给我一个免费的 Star 吧~

大家如果发现了 Bug，欢迎来提 Issue 哟~

github源码

gitee源码

示例地址

另存为SVG

这一章增强了另存为的能力，实现“另存为SVG”，大概是全网唯一的实例分享了吧。

灵感来源：react-konva-custom-context-canvas-for-use-with-canvas2svg

大神提到了 canvas2svg，表达了可以通过创建一个 canvas2svg 的实例，作为 CanvasRenderingContext2D 替换了 Konva 原有 canvas 的 CanvasRenderingContext2D，并使其 layer 重绘，canvas2svg 的实例借此监听 canvas 的动作，转换成 Svg 动作，最终生成 svg 内容。

不过，大神的例子，并没有说明如何处理并导出图片节点。

通过测试大神的例子，并观察导出的 svg xml 特点，以下是基本实现思路和注意事项：

1、必须通过替换 layer 的 context 实现，通过 stage 是无效的。

2、导出的 svg xml，图片节点将以 svg 的 image 节点存在。

3、svg 图片素材节点的 xlink:href 以 blob: 链接定义。

4、其它图片素材节点的 xlink:href 是以一般路径链接定义。

5、通过正则表达式提取图片素材节点链接。

6、fetch svg 图片素材节点链接，获得 svg xml 文本。

7、fetch 其它图片素材节点，获得 blob 后，转换为 base64 链接。

8、替换 canvas2svg 导出的 svg xml 内的 svg 图片素材节点为内嵌 svg 节点（xml）。

9、替换 canvas2svg 导出的 svg xml 内的其它图片素材节点的 xlink:href 为 base64 链接。

10、导出替换完成的 svg xml。

关键逻辑

功能入口

主要是 canvas2svg 的使用，获得原始的 rawSvg xml 内容：

  // 获取Svg
  async getSvg() {
    // 获取可视节点和 layer
    const copy = this.getView()
    // 获取 main layer
    const main = copy.children[0] as Konva.Layer
    // 获取 layer 的 canvas context
    const ctx = main.canvas.context._context

    if (ctx) {
      // 创建 canvas2svg
      const c2s = new C2S({ ctx, ...main.size() })
      // 替换 layer 的 canvas context
      main.canvas.context._context = c2s
      // 重绘
      main.draw()

      // 获得 svg
      const rawSvg = c2s.getSerializedSvg()
      // 替换 image 链接
      const svg = await this.parseImage(rawSvg)

      // 输出 svg
      return svg
    }
    return Promise.resolve(
      `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="720"></svg>`
    )
  }

替换 image 链接方法

根据 xlink:href 链接的特点，通过正则表达式提取，用于后续处理：

  // 替换 image 链接
  parseImage(xml: string): Promise<string> {
    return new Promise((resolve) => {
      // 找出 blob:http 图片链接（目前发现只有 svg 是）
      const svgs = xml.match(/(?<=xlink:href=")blob:https?:\/\/[^"]+(?=")/g) ?? []
      // 其他图片转为 base64
      const imgs = xml.match(/(?<=xlink:href=")(?<!blob:)[^"]+(?=")/g) ?? []

      Promise.all([this.parseSvgImage(svgs), this.parseOtherImage(imgs)]).then(
        ([svgXmls, imgUrls]) => {
          // svg xml
          svgs.forEach((svg, idx) => {
            // 替换
            xml = xml.replace(
              new RegExp(`<image[^><]* xlink:href="${svg}"[^><]*/>`),
              svgXmls[idx].match(/<svg[^><]*>.*<\/svg>/)?.[0] ?? '' // 仅保留 svg 结构
            )
          })

          // base64
          imgs.forEach((img, idx) => {
            // 替换
            xml = xml.replace(`"${img}"`, `"${imgUrls[idx]}"`)
          })

          // 替换完成
          resolve(xml)
        }
      )
    })
  }

替换 svg blob: 链接

批量 fetch svg blob: 链接，获得 xml 内容：

  // 替换 svg blob: 链接
  parseSvgImage(urls: string[]): Promise<string[]> {
    return new Promise((resolve) => {
      if (urls.length > 0) {
        Promise.all(urls.map((o) => fetch(o))).then((rs: Response[]) => {
          // fetch

          // 替换为 svg 嵌套
          Promise.all(rs.map((o) => o.text())).then((xmls: string[]) => {
            // svg xml
            resolve(xmls)
          })
        })
      } else {
        resolve([])
      }
    })
  }

替换其他 image 链接

批量 fetch 图片链接，获得 base64 链接：

  // blob to base64 url
  blobToBase64(blob: Blob, type: string): Promise<string> {
    return new Promise((resolve) => {
      const file = new File([blob], 'image', { type })
      const fileReader = new FileReader()
      fileReader.readAsDataURL(file)
      fileReader.onload = function () {
        resolve((this.result as string) ?? '')
      }
    })
  }

  // 替换其他 image 链接
  parseOtherImage(urls: string[]): Promise<string[]> {
    return new Promise((resolve) => {
      if (urls.length > 0) {
        Promise.all(urls.map((o) => fetch(o))).then((rs: Response[]) => {
          // fetch

          // 替换为 base64 url image
          Promise.all(rs.map((o) => o.blob())).then((bs: Blob[]) => {
            // blob
            Promise.all(bs.map((o) => this.blobToBase64(o, 'image/*'))).then((urls: string[]) => {
              // base64
              resolve(urls)
            })
          })
        })
      } else {
        resolve([])
      }
    })
  }

过程示例

通过 canvas2svg 获得原始的 rawSvg xml 内容：

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="428" height="448">
  <defs/>
  <g>
    <rect fill="#FFFFFF" stroke="none" x="0" y="0" width="428" height="448"/>
    <g transform="matrix(1,0,0,1,69,80)">
      <!-- gif 图片 -->
      <image width="200" height="200" preserveAspectRatio="none" xlink:href="data:image/png;base64,略..."/>
      <g transform="translate(0,0)"/>
    </g>
    <g transform="matrix(1,0,0,1,17,22)">
      <!-- png 图片 -->
      <image width="64" height="64" preserveAspectRatio="none" xlink:href="/src/assets/img/png/2.png"/>
      <g transform="translate(0,0)"/>
    </g>
    <g transform="matrix(1,0,0,1,228,232)">
      <!-- svg 图片 -->
      <image width="200" height="200" preserveAspectRatio="none" xlink:href="blob:http://localhost:5173/da9ddae7-2ac7-47fb-99c0-e7171aa41655"/>
      <g transform="translate(0,0)"/>
    </g>
  </g>
</svg>

替换之后：

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="428" height="448">
  <defs/>
  <g>
    <rect fill="#FFFFFF" stroke="none" x="0" y="0" width="428" height="448"/>
    <g transform="matrix(1,0,0,1,69,80)">
      <!-- gif 图片 base64 -->
      <image width="200" height="200" preserveAspectRatio="none" xlink:href="data:image/*;base64,略..."/>
      <g transform="translate(0,0)"/>
    </g>
    <g transform="matrix(1,0,0,1,17,22)">
      <!-- png 图片 base64 -->
      <image width="64" height="64" preserveAspectRatio="none" xlink:href="data:image/*;base64,略..."/>
      <g transform="translate(0,0)"/>
    </g>
    <g transform="matrix(1,0,0,1,228,232)">
      <!-- svg 内嵌 -->
      <svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1">
        <path d="M512 0c282.763636 0 512 229.236364 512 512S794.763636 1024 512 1024 0 794.763636 0 512 229.236364 0 512 0z m0 11.636364C235.659636 11.636364 11.636364 235.659636 11.636364 512s224.023273 500.363636 500.363636 500.363636 500.363636-224.023273 500.363636-500.363636S788.340364 11.636364 512 11.636364z m-114.781091 683.927272c38.388364 6.632727 63.767273 22.853818 103.133091 61.556364l7.563636 7.528727 19.502546 19.921455c4.736 4.770909 9.262545 9.216 13.637818 13.370182l6.434909 6.004363c1.047273 0.965818 2.094545 1.908364 3.141818 2.839273l6.132364 5.352727c30.196364 25.728 53.946182 35.735273 87.226182 36.398546 69.992727 1.361455 119.936-22.027636 150.621091-70.272l2.094545-3.397818 9.972364 6.004363c-32.756364 54.318545-87.354182 80.779636-162.909091 79.290182-41.262545-0.814545-68.817455-14.650182-107.333818-50.583273l-6.714182-6.376727-6.946909-6.818909-7.226182-7.272727-15.709091-16.069819-7.284364-7.26109c-37.922909-37.329455-61.777455-52.596364-97.314909-58.740364-67.397818-11.659636-122.705455 10.24-166.725818 66.106182l-2.792727 3.607272-9.262546-7.028363c47.045818-61.940364 107.578182-86.807273 180.759273-74.158546z"/>
      </svg>
      <g transform="translate(0,0)"/>
    </g>
  </g>
</svg>

关于 gif，实测内嵌于 svg 中是无法显示的，现在除了 svg 图片素材节点，其它图片素材统一按静态图片处理。

磁贴

增加了对 stage 逻辑边界的磁贴：

其它调整

staget 逻辑区域

原来 stage 的逻辑区域和比例尺的区域是重叠一致的（大小一致，默认根据比例尺大小对齐 0 点而已），实在有点变扭，可能会让人产生疑惑。

现已经调整 stage 的逻辑区域即为默认可视区域（区别可以观察红色虚线框的改变）。

顺便使得预览框的交互优化的更符合直觉。

官方的 API 的 Bug

Bug: 恢复 JSON 时候，如果存在已经被放大缩小点元素，点击选择无效

原因不详，Hack 了一下，暂时可以消除影响。

接下来，计划实现下面这些功能：

• 对齐效果
• 连接线
• 等等。。。

是不是值得更多的 Star 呢？勾勾手指~

源码

gitee源码

示例地址