javascript - 如何将 Easeljs 图形对象转换为 base64？

Question

我注意到在 Graphics 对象中有一种方法可以根据 base64 字符串向 Graphics 对象添加笔画和填充，但是有什么方法可以进行相反的转换吗？即从 Graphics 对象创建一个 base64 字符串？我想这样做的原因是 Graphics 对象可以以字符串形式存储，然后解码为 Graphics 对象。如果有一个 easeljs 函数可以做到这一点，那将是我的首选方式。如果没有，我想知道是否有某种方法可以访问图形信息并自己将其转换为字符串。

Answer 1

有人刚刚对我的问题投了赞成票，所以我想我会回答。

简短的回答是否定的，没有函数可以做到这一点。 http://community.createjs.com/discussions/easeljs/7828-is-there-a-way-to-convert-an-easeljs-graphics-object-to-a-base64-string

但是你可以自己做。 CreateJS 在其 base 64 编码中使用的模式在以下位置进行了描述:http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_decodePath

解码器的源代码位于:http://www.createjs.com/Docs/EaselJS/files/easeljs_display_Graphics.js.html#l1041

下面是一个示例函数。但是，它只会编码直线；它不会编码二次或贝塞尔曲线。另外，如果我没记错的话，它不会针对较小的 x 和 y 值优化字符串大小。如果有人有更完整的解决方案并愿意分享，我很乐意看到它，因为我实际上计划在接下来的一两个月内重新开始这个项目，如果我有时间的话。

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;
}