将fabricjs画布转换为base64图像

Posted

技术标签:

【中文标题】将fabricjs画布转换为base64图像【英文标题】:Convert fabricjs canvas to base64 image 【发布时间】:2018-06-26 14:36:49 【问题描述】:

我正在尝试将画布作为图像发送到我的服务器,并且我想以 base64 格式发送。 Fabricjs 提供使用canvas.toSVG()canvas.toDataURL(format: 'image/png') 将画布转换为图像,但是我日志上的输出似乎是一个Klass 对象(第一次看到),并且在将该对象发送到服务器并记录服务器上收到的内容时我得到一个空对象或路径,即:

 version: '2.0.0-rc.3', objects: [] 
 version: '2.0.0-rc.3',
  objects: 
   [  type: 'path',
       version: '2.0.0-rc.3',
       originX: 'left',
       originY: 'top',
       left: 156.21249771118164,
       top: 221.20000457763672,
       width: 132,
       height: 53,
       fill: null,
       stroke: 'Red',
       strokeWidth: 10,
       strokeDashArray: null,
       strokeLineCap: 'round',
       strokeLineJoin: 'round',
       strokeMiterLimit: 10,
       scaleX: 1,
       scaleY: 1,
       angle: 0,
       flipX: false,
       flipY: false,
       opacity: 1,
       shadow: null,
       visible: true,
       clipTo: null,
       backgroundColor: '',
       fillRule: 'nonzero',
       paintFirst: 'fill',
       globalCompositeOperation: 'source-over',
       transformMatrix: null,
       skewX: 0,
       skewY: 0,
       path: [Object]  ] 

类对象控制台图像:

我的代码:

var canvas = new fabric.Canvas();
canvas.loadFromJSON(val[i].story); //val has saved canvas
canvas.toSVG(); //or to dataURL()

我尝试了this 并且仍然是同一个 klass 对象,需要将画布转换为 base64 图像(首选 png)并发送到我将转换为图像文件的服务器,谢谢。

【问题讨论】:

这件事是不可能的。 toDataUrl 给你一个字符串,toSVG 也是如此。请一些代码,以便我们更好地检查。你在nodejs下运行吗?什么版本的fabricjs? 【参考方案1】:

因此在创建画布时我错过了画布的 ID

var canvas = new fabric.Canvas('canvasID');

【讨论】:

以上是关于将fabricjs画布转换为base64图像的主要内容,如果未能解决你的问题,请参考以下文章

将图像数据URI(base64)设置为画布背景

在Nodejs中将base64 png转换为jpeg图像

二进制图像文件转换为Base64编码

在 JavaScript 中调整 Base-64 图像的大小而不使用画布

jCrop HTML5 Canvas Base64

将fabricjs画布保存为电脑上的图像