如何使用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(...)" />

- Jacek Gzel

---

我不确定fabricjs中是否有直接选项，但自己编写也不难：解析URL，加载图像，将其绘制到新的画布上并调整大小以适应图像的尺寸，用此画布的toDataURL结果替换URL。 - Kaiido

我在寻找fabricjs中的直接选项，但如果不存在，我就必须自己编写。感谢Kaiido的建议，我会采用你的方法。 - Jacek Gzel

在fabricjs的文档中进行了快速搜索后，我没有找到任何选项。但是之后我想到的是，您实际上可以直接将图像转换为dataURI，并将此dataURI传递给fabricjs，我猜它会起作用并避免解析问题。此外，一些SO用户确实参与了fabricjs的开发，所以让我们希望他们看到您的帖子，并在将来的版本中包括此选项。（即使我可以看到跨域限制在这样的库中是不可行的） - Kaiido

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。

- AndreaBogazzi

Answer 2

您可以使用toSVG方法：

rasterizeSVG () {
    let w = window.open('')
    w.document.write(this.canvas.toSVG())
    return 'data:image/svg+xml;utf8,' + encodeURIComponent(this.canvas.toSVG())
  }

或者：

rasterize() {
  if (!fabric.Canvas.supports('toDataURL')) {
    alert('This browser doesn\'t provide means to serialize canvas to an image');
  }
  else {
    var image = new Image();
    image.src = this.canvas.toDataURL('png')
    var w = window.open("");
    w.document.write(image.outerHTML);
  }
}

- ouzza brahim

---

嗨@ouzza，我有同样的问题，但是通过验证你的示例，我发现它可以工作，但不像我希望的那样。我只需要在相同的视图Canvas和Image中显示图像，你能帮助我吗（使用Angular的示例）？ - jecorrales

嗨@jecorrales，很抱歉我没有及时回复。 你能解释一下你的问题吗？ - ouzza brahim

顺便提一下，这两个例子在Vuejs和Angular中都能正常工作。 - ouzza brahim

是的，谢谢你...我也可以用其他方法来找到解决方案。不过，你的例子很好，对我很有帮助！ - jecorrales