如何在fabricjs中使用嵌入式图像base64将画布转换为SVG答案

【问题标题】：How to convert canvas to SVG with embedded image base64 in fabricjs如何在fabricjs中使用嵌入式图像base64将画布转换为SVG
【发布时间】：2016-09-04 05:00:39
【问题描述】：

我有带有图像的 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(...)" />

【问题讨论】：

我不知道fabricjs中是否有直接选项，但是自己写不会难：解析URL，加载图像，将其绘制到调整大小的新画布使用图像的尺寸，将 URL 替换为此画布的 toDataURL 结果。
我在fabricjs中找了一个直接的选项，但是如果不存在就得自己写了。感谢 Kaiido 的建议，我会实施您的方法。
在fabricjs 的文档中快速搜索后，我找不到任何选项。但后来我想到的是，你实际上可以直接将你的图像转换为 dataURI 并将这个 dataURI 传递给fabricjs，我想它会起作用并避免解析的事情。此外，一些 SO 用户确实参与了 fabricjs 的开发，所以希望他们看到你的帖子，并在未来的版本中包含这个选项。（即使我可以在这样的库中看到跨域限制是不可行的）

标签： javascript html svg fabricjs

【解决方案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 的集成图像。

【讨论】：

【解决方案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，我有同样的问题，但证明你的例子我发现它有效但不像我希望的那样。我只需要同一视图 Canvas 和 Image 中的图像，您能帮帮我吗（在您的 Angular 示例中）？
嗨@jecorrales 对不起，我没有尽快回复。你能解释一下你的问题吗？
顺便说一下，这两个示例在 vuejs 和 angular 中都可以正常工作
是的，谢谢...我可以通过其他方式找到解决方案。但是，你的例子很好，它对我有用！