如何在fabricjs中将画布转换为具有嵌入式图像base64的SVG

杰西克·格泽尔(Jacek Gzel)

我有带图像的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(...)" />
安德里亚·博加齐(Andrea Bogazzi)

没有选择,但是您可以像这样轻松实现: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的集成图像。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在JavaScript中将文件转换为base64?

在angularjs中将图像转换为base64

如何使用htmlcomponent导出带有嵌入式图像(base64,数据uri)的HTML文本?

如何在React中将文件转换为Base64

将FabricJS Canvas转换为base64图像

HTML嵌入式Base64图像的JEditorPane内容类型

使具有嵌套图像的嵌入式SVG可以访问

React Native-如何在Android中将图像转换为Base64,反之亦然

如何解码base64 fbx嵌入式图像

在Flutter中将图像资产转换为base64

在Angular中将图像URL转换为base64

如何在Kotlin Android中将base64字符串转换为图像

在Ruby中将实际图像转换为base64

如何在嵌入式平台中将u32数据转换为&str?

如何在Vue.Js中将图像URL从服务器(API / ImageURL)转换为Base64

在Flutter错误中将base64转换为图像

如何在Azure中将pdf转换为base64

使用画布,如何在图像中切入带有嵌入式阴影的孔?

如何发送带有base64嵌入式图像的电子邮件

如何在Groovy脚本中将十六进制转换为base64格式

如何在C中将图像转换为base64?

如何在jQuery中将预加载的图像转换为base64数据

如何在Qt中将Jpeg Base64字符串转换为jpeg图像

如何在JavaScript中将base64 WAV转换为base64 mp3

如何在angularjs中将图像转换为base 64?

使用SVGKit渲染带有嵌入式Base64编码的png图像的SVG会占用大量内存

如何在xamarin.android中将图像转换为base64?

如何在Word中将嵌入式图像转换为浮动图像?

如何在Angular中将本地图像文件转换为base64?

TOP 榜单

热门标签

归档