[SOLVED] EaselJS: Is there any way to export a shape to an image file?

EaselJS: Is there any way to export a shape to an image file?

I have a project in CreateJS which I'd like to remake without CreateJS, but it seems that all my images are in an EaselJS shape format. For example:

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#465762").s().p("AgOAOQgFgFAAgJQAAgHAFgHQAHgFAHgBQAIABAHAFQAFAHAAAHQAAAJgFAFQgHAHgIgBQgHABgHgHg");
this.shape_1.setTransform(43.4,42,0.747,0.747);

Is there some method I could use to export that to an image file?

Solution

You can export any EaselJS DisplayObject by caching it, and then exporting the dataURL. Note that you have to know the raw bounds. If you want a larger cache of it, just increase the scale parameter.

this.shape_1.cache(x, y, w, h, [scale]);
var url = this.shape_1.getCacheDataURL();

Unfortunately this method does not support the parameters of the Canvas.toDataURL(), so if you want that, you can hit the cache directly:

this.shape_1.target.cacheCanvas.toDataURL(…[type], [encoderOptions]);

Then, you can use the dataURL in a number of ways. Here is an article on it. Alternatively, just throw the generated cache into the DOM, and right-click on it to save.

document.body.appendChild(this.shape_1.target.cacheCanvas);

Docs: