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的集成图像。

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

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

2 个答案: