Convert fabricjs canvas to base64 image

Question

I'm trying to send a canvas as an image to my server and I want to send as base64. Fabricjs offers using canvas.toSVG() or canvas.toDataURL({format: 'image/png'}) to convert the canvas to an image however the output on my log appears to be a Klass object (first time seeing that) and upon sending that object to the server and logging what's received on the server I get an empty object or a path ie:

{ 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] } ] }

Klass object console image:

My code:

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

I tried this and still the same klass object, need to convert the canvas to base64 image (png preferred) and send to the server where I'll be converting to an image file, thanks.

Answer 1

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

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