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

I have fabricjs canvas with image, which I loaded by fabric.Image.fromURL() method.

我有fabricjs画布与图像，我通过fabric.Image.fromURL（）方法加载。

I need export it to SVG, but I want to export image as embedded source in base64, not as a link.

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

How can I do it? Is it any way to load image as a source not as a link?

我该怎么做？是否可以将图像作为源加载而不是链接？

Example code:

示例代码：

Loading image:

载入图片：

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

Exporting to SVG:

导出到SVG：

canvas.toSVG();

In exported SVG I have:

在导出的SVG我有：

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

But I want it in base64 like:

但我希望它在base64中像：

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

2 个解决方案

#1

There is no option but you can easily achieve it like this: Image has a method that is called 'getSvgSrc';

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

override it like this:

像这样覆盖它：

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

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

In this way you should be able to obtain an integrated image for the svg.

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

#2

you can use the toSVG method :

你可以使用toSVG方法：

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

or :

要么：

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);
  }
}

#1