如何在fabricjs中将画布转换为具有嵌入式图像base64的SVG

Question

我有带图像的fabricjs画布，该画布是按fabric.Image.fromURL()方法加载的。

我需要将其导出到SVG，但是我想将图像导出为base64中的嵌入式源，而不是链接。

我该怎么做？有什么办法可以将图像加载为源而不是链接吗？

示例代码：

正在载入图片：

fabric.Image.fromURL('./assets/people.jpg', function (image) {
    image.set({
        left: 10,
        top: 30
    });
    canvas.add(image);
};

导出到SVG：

canvas.toSVG();

在导出的SVG中，我有：

<image xlink:href="http://localhost:8383/app/assets/people.png" />

但是我想要在base64中像这样：

<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAe8AAAKuCAYAAACIZZSZAAAAAXNSR0IArs4c6QAAAARnQU1BAACx(...)" />

Answer 1

没有选择，但您可以像这样轻松实现它： Image 有一个名为 'getSvgSrc' 的方法；

像这样覆盖它：

fabric.Image.prototype.getSvgSrc = function() {
  return this.toDataURLforSVG();
};

fabric.Image.prototype.toDataURLforSVG = function(options) {
  var el = fabric.util.createCanvasElement();
        el.width  = this._element.naturalWidth || this._element.width;
        el.height = this._element.naturalHeight || this._element.height;
  el.getContext("2d").drawImage(this._element, 0, 0);
  var data = el.toDataURL(options);
  return data;
};

通过这种方式，您应该能够获得 svg 的集成图像。