Canvas与Svg互转

本文主要以两个库canvg和canvas2svg为例。尝试探寻Svg与Canvas如何实现互转，以及上述两个库的可用性问题。

简单尝试

Svg转Canvas

以一个简单的静态svg图表作为案例，采用canvg转为canvas结果如下图所示。其中最顶部的装饰线条不见了，具体原因我们稍后再分析。

Canvas转Svg

原本的期望为将上述转化完的canvas在由canvas2svg转回svg执行报错Attempted to apply path command to node g。说明canvg在渲染过程中可能存在某些问题导致绘图操作不能被canvas2svg识别。接下来将以canvas2svg的示例demo绘制探究其绘制原理。

小结

Svg转Canvas直接基于canvg来转可能会有些错误（另外，直接基于canvg做svg导出可能会遇到svg中引用的class、图片等资源不生效的问题，需要先将class的样式解析成svg标签中的属性，这里不做展开，详情见saveSvgAsPng）。

canvas转svg是通过记录canvas绘图操作，解析操作、基于svg渲染器渲染的方式来实现的。在没有canvas的context或者说在没有canvas的操作记录的情况下canvas转svg就会退化成位图转矢量图。由于位图和矢量图存储信息方式的不同，几乎不存在不失真的情况话做转换。另外的确存在一些基于图像识别、图像追踪的位图转矢量图方案，详情见[附录](# 附录)。目前未发现基于NPM生态的位图转矢量图方案。

Svg转Canvas具体实现

canvg实现svg转canvas的方案为将svg文件根据标签实别为一个一个单独的元素，每个的元素会有对应的渲染方法。

核心方法

render(ctx: RenderingContext2D) {
    // don't render display=none
    // don't render visibility=hidden
    // 为空直接跳过
    if (this.getStyle('display').getString() === 'none'
        || this.getStyle('visibility').getString() === 'hidden'
       ) {
        return;
    }

    ctx.save();

    if (this.getStyle('mask').hasValue()) { // mask
        const mask = this.getStyle('mask').getDefinition<MaskElement>();

        if (mask) {
            this.applyEffects(ctx);
            mask.apply(ctx, this);
        }
    } else
        if (this.getStyle('filter').getValue('none') !== 'none') { // filter
            const filter = this.getStyle('filter').getDefinition<FilterElement>();

            if (filter) {
                this.applyEffects(ctx);
                filter.apply(ctx, this as unknown as PathElement);
            }
        } else {
            // 写入context
            this.setContext(ctx);
            // 渲染元素本身及子元素
            this.renderChildren(ctx);
            // 清空context为下一次渲染做准备
            this.clearContext(ctx);
        }

    ctx.restore();
}

例：绘制圆形

export default class CircleElement extends PathElement {
type = 'circle';
path(ctx: RenderingContext2D) {
        // 实别标签中的圆心 半径
const cx = this.getAttribute('cx').getPixels('x');
const cy = this.getAttribute('cy').getPixels('y');
const r = this.getAttribute('r').getPixels();
        // 调用canvas绘图api
if (ctx && r > 0) {
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2, false);
ctx.closePath();
}
return new BoundingBox(
cx - r,
cy - r,
cx + r,
cy + r
);
}
getMarkers() {
return null;
}
}

以上，从原理分析canvg根据svg绘制canvas的方案为解析svg标签及样式、根据根据解析结果调用对应的canvas绘制对应的元素。至于上文顶部的装饰线条不见的问题，暂时当作普通bug不做深究。

Canvas转Svg具体实现

canvas2svg实现canvas转svg的方案为重写canvasAPI在绘制canvas的同时绘制svg。

canvas2svg源码，示例代码：

/**
  * adds a rectangle element
  */
ctx.prototype.fillRect = function (x, y, width, height) {
    var rect, parent;
    // 调用fillRect的同时创建了rect的svg元素
    rect = this.__createElement("rect", {
        x : x,
        y : y,
        width : width,
        height : height
    }, true);
    parent = this.__closestGroupOrSvg();
    parent.appendChild(rect);
    this.__currentElement = rect;
    this.__applyStyleToCurrentElement("fill");
};