How can I convert an Easeljs Graphics object to base64?

Question

I noticed there is a method in Graphics objects to draw to add strokes and fills to the Graphics object based on a base64 string, but is there some way to do the opposite conversion? i.e. create a base64 string from a Graphics object? The reason I want to do this is so that that Graphics object can be stored in string form and later decoded into a Graphics object. If there is an easeljs function that does that, that would be my preferred way. If not, I would like to know if there's some way I can access graphics information and turn it into a string myself.

Answer 1

Someone just up-voted my question, so I guess I'll answer it.

The short answer is no, there is not function that does that. http://community.createjs.com/discussions/easeljs/7828-is-there-a-way-to-convert-an-easeljs-graphics-object-to-a-base64-string

But you can do it yourself. The pattern that CreateJS uses in its base 64 encoding is described at: http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_decodePath

The source code for the decoder is at: http://www.createjs.com/Docs/EaselJS/files/easeljs_display_Graphics.js.html#l1041

Below is an example function. However, it will only encode straight lines; it won't encode quadratic or bezier curves. Also, if I remember right, it doesn't optimize the string size for smaller x and y values. If someone has a more complete solution and is willing to share, I'd love to see it, because I'm actually planning on getting back to work on this project some in the next month or two, if I have the time.

kettu.BASE_64_LIST = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i', 'j', 'k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','+','/'];

kettu.toBase64 = function(myShape) {
    var result = '';
    var prevX = 0;
    var prevY = 0;
    for(var i = 2; i < myShape.graphics._instructions.length - 1; i++) {
        var header;
        var x = 0x00000;
        var y = 0x00000;
        if(myShape.graphics._instructions[i].f == kettu.context.lineTo || myShape.graphics._instructions[i].f == kettu.context.moveTo) {
            if(myShape.graphics._instructions[i].f == kettu.context.lineTo) {
                header = 'M';
                xStart = myShape.graphics._instructions[i].params[0] * 10 - prevX;
                yStart = myShape.graphics._instructions[i].params[1] * 10 - prevY;
                x = Math.abs(xStart);
                y = Math.abs(yStart);
                prevX += xStart;
                prevY += yStart;
                x1 = (x & 0xff000);
                if (xStart < 0) x1 |= 0x20;
                x2 = (x & 0x00fc0) >> 6;
                x3 = (x & 0x0003f);
                y1 = (y & 0xff000) >> 12;
                if (yStart < 0) y1 |= 0x20;
                y2 = (y & 0x00fc0) >> 6;
                y3 = (y & 0x0003f);
                x = kettu.BASE_64_LIST[x1] + kettu.BASE_64_LIST[x2] + kettu.BASE_64_LIST[x3];
                y = kettu.BASE_64_LIST[y1] + kettu.BASE_64_LIST[y2] + kettu.BASE_64_LIST[y3];
            }
            else if(myShape.graphics._instructions[i].f == kettu.context.moveTo) {
                header = 'E';
                x |= myShape.graphics._instructions[i].params[0] * 10;
                y |= myShape.graphics._instructions[i].params[1] * 10;
                prevX = x;
                prevY = y;
                x1 = (x & 0xff000) >> 12;
                if (x < 0) x1 |= 0x20;
                x2 = (x & 0x00fc0) >> 6;
                x3 = (x & 0x0003f);
                y1 = (y & 0xff000) >> 12;
                if (y < 0) y1 |= 0x20;
                y2 = (y & 0x00fc0) >> 6;
                y3 = (y & 0x0003f);
                x = kettu.BASE_64_LIST[x1] + kettu.BASE_64_LIST[x2] + kettu.BASE_64_LIST[x3];
                y = kettu.BASE_64_LIST[y1] + kettu.BASE_64_LIST[y2] + kettu.BASE_64_LIST[y3];
            }
        }
        result += header + x + y;
    }
    return result;
}