Search code examples
createjseaseljs

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: