如何在canvasjs中使用嵌入式图像base64将画布转换为SVG [英] How to convert canvas to SVG with embedded image base64 in fabricjs

问题描述

我有带有图像的fabricjs画布，我用 fabric.Image.fromURL（）方法加载。

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

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

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

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

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

示例代码：

加载图片：

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(...)" />

推荐答案

没有选项，但你可以很容易地实现它：
Image有一个名为'getSvgSrc'的方法;

There is no option but you can easily achieve it like this: Image has a method that is called '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的集成图像。

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

这篇关于如何在canvasjs中使用嵌入式图像base64将画布转换为SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！