将图形代码转换为 SVG/PNG 图像

Question

我有一个学校的动画项目，我遇到了硬盘崩溃并丢失了我的原始文件Adobe animate (.fla(。我需要编辑一些矢量，但我没有原始文件，因此我需要转换 svg 图像中的代码。

我已经在Windows PC上创建了该项目，并使用动画html5 javascript模式

this.shape_4 = new cjs.Shape();
this.shape_4.graphics.f("#FF3300").s().p("AlQFlQgDgIABgTQACgTgDgIQgHgPgBgHQgCgGACgJQABgLAAgGQAAgHgGgNQgGgPgBgGIAAgPQABgJgBgFQgBgMgEgKQgHgUgEgWQgCgZgEgLQgGgNAAgGQgBgEAAgHIABgMQAAgJgDgNIgFgSIgGgkQgFgagKgbIgIgYIgCgGIACAAIAXgMQARgIAegGQAHgGAJgFQATgMAWgDIAAAAQAIAAAHAEIAGgEIABgBIAFAIQACAEABAHIAFAKQADALADAmQAGAuAAAZIgCAfIACAKIAAAeQgBASACAMIAGAVQAFAPABAHQABAMgBASIgDAcQgDAXAJAMQAGAGAKABQALgBADgHQACgDgBgGIAAgBIBzgvIABADQABAFAHAJQAEAJAAAWIgBA6IAAAVIgIAAIACABIhsAnQgcALgNACIgnAHIgpAMIgYAJIgBgEgAHoEpIgOgnIgGgZQgHgfgPgeQArgsArg4IAuhBQAGgGAJgNIAKgRIADAAQAKgDACgHQABgJgHgKIghgzIgOgUQgWgggMgOQgQgTgRgMQAbgbARgWQALgSAKgKQAKgJAMgHQAKAUAgAnQAeAlAKAXQALAaAHAHQAGAEAHABIADACQAIADAIgCQAGgDAHgHIAMgMQAQgSAlgcIAogeQALAJANARIAVAbQAQATAMALQAKAMAJAEIgJAJQgMAOgSARIgeAdIhFBCIgPAKIgPANQgiAegHAIQgfAeg2A9Qg4A/gdAcQgnAlgUAXIgBgDgAtlEcQgLACgJgBIABgUQgKgTgCgiIgHh4QgDgSAGgLIAHgIQgBgSgCgOQgBgLgGgVQgCgMAAgZIAAgmIgFgnQgHhBgEhKQgCgKADgJIACgCIgEgHIAKAAIAKgCQADgCADgHIAEgIQBGAACBATQAsAHAaAHQAbAHAeARQAMAGARAMQAXATALAQQANAVACAYQABAdgOAWIgTAXIgRAbQgKARgKAHQgKAJgZAKIg/AXQgkANgdAHIgdAHQgQAFgLAHIgDADIACAHQAIAfADAsIADBMQAAAQgCAKIABAHIgDABIgEAJQgJARgeAMQgPAFgOAAQgOAAgMgGgAsgh/QgHAIAAAGQAAAEAGAJQAEAHABALIABAUQAAAUAIAKIABAAQADACADAEQAJAFAQAAIAdgBQANgBAPgJQAJgFASgMQATgPADgOQADgLgIgRQgFgKgFgEQgFgEgHgCIgOgBIhDgEQgTAAgDgIIgMAAQgBAEgIAIgABhD5QgJgBgNgEIgWgIQgRgHgYgGIghgGIAAgIIgBgPQAAgKAFgVQAGgVABgKIABgNIAAgPIADgJIAFgKQABgIAAgMIAAgWQgCgTACgMIAFgIQACgEABgDQABgHAAgMQgBgNABgHQABgGAHgNQAEgOgDgbQgCgQAEgSIAIgUQACgHgBgQQgCgPACgHIAGgOQAEgJAAgFIAAgLQgBgHABgEQABgEADgHIAEgJQADgIgCgSQgBgRACgIIACgFQANABANgDIAagGQAWgDAHgDIAXgJQAPgFAKgBIASgBQALgBAGgCIAEAXIAUBfIAFAaIAEAaIAFASIAGAXIAKAoIAKAoIATBGQAEALACAKIAEAYIAFAUQAGAPAEARQAEAOAFALQABAFAGAMQAHARAEAWIgBAAIhhAYQgKADgFgDQgHgFAAgLQgDgjgSgfIgFgBQgDgEgDgCIAAgCIgjAKQgRAFgHAFQgIAFgHALQgFAIAAALIAAATQAAAMgCAGQgBAEgDAHQgDAGgBAFQgBAEABAHIAAALIAAACIgMgBgACNhxQgFABgCADQgEAJAAAIIgCA9QgCAWgEAKQgHAMgBAFQgBAIAEAHQAEAHAHACQAEACAIAAIAPACQAXADAHgMQAFgJgFgNIgFgJQgDgGAAgCIgBgMQAAgJgCgEIgGgMQgDgFABgNQABgMgDgGIgEgGQgDgDAAgDIgBgHIgBgHQAAgKgHgBQgBAAAAgBQgBAAAAAAQAAAAgBAAQgBgBAAAAIgDABg");
this.shape_4.setTransform(1.5,-0.5);
this.shape_5 = new cjs.Shape();
this.shape_5.graphics.f("#FF6600").s().p("AlxGCQgDgJACgTQABgVgDgJQgIgQgBgIQgBgHABgKQACgMgBgFQAAgIgGgOQgGgRgBgGIAAgQQABgKgBgEQgCgOgEgLQgIgWgEgXQgDgbgEgMQgGgPgBgGQgBgFABgHIAAgNQAAgKgDgNIgFgVIgHgmQgGgdgKgcIgJgbIgCgGIACgBIAZgLQATgJAhgHQAIgGAJgGQAVgNAYgDIAAgBQAJAAAIAGIAGgGIABAAIAGAJQACAEABAHQADAFACAGQAEAMADApQAHAyAAAbIgCAiIACALIgBAgQAAAUACALQACAJAFAQQAFAOABAJQABANgBATIgDAeQgDAaAKAMQAGAIALgBQAMABADgJQACgDAAgHIAAgBIB+gyIAAADQABAFAIALQAFAJAAAXIgCBAIABAWIgJAAIACABIh2ArQgfALgPACIgqAIIgtANIgaAJIgCgEgAIXFCIgPgrIgHgbQgIgigQggQAvgwAvg8IAyhHQAHgHAKgNQAGgMAFgGIAEgBQAKgCACgJQACgIgIgMIgkg2IgPgWQgYgkgOgOQgSgVgSgNQAegdASgYQAMgTALgMQALgJAOgHQALAVAiAqQAhAoALAZQANAcAHAIQAGAEAIACIADABQAJAEAJgDQAHgDAIgIIAMgMQASgVApgdIAsghQALAKAOASIAYAeQASAUAMANQALANAKADIgKALQgNAOgTATIgiAfIhLBHIgQAMIgRANQglAggIAKQgiAgg7BCQg+BFggAeQgqAogWAZIgBgDgAu5E0QgMABgJAAIABgWQgMgVgCgkIgIiDQgCgTAGgLIAHgJQAAgUgDgPQgBgMgHgWQgBgOAAgbIAAgpIgGgrQgIhFgEhRQgDgKAEgKIACgCIgEgIIAKAAIALgCQAEgCADgIIAFgJQBMABCNAUQAxAIAcAIQAeAHAhATQANAGASAOQAaATAMASQAOAXACAaQACAfgPAXQgGAIgPASIgTAdQgLARgLAJQgLAKgcALIhEAYQgoAOggAIIggAIQgRAGgMAGIgDADIABAIQAJAjADAuQACARACBCQAAAQgCAMIABAIIgDAAIgEAKQgKATghANQgRAFgPAAQgQAAgNgGgAttiJQgIAIAAAGQAAAFAGAKQAFAIABAMIACAVQAAAVAIALIABAAQAEACADAGQAKAEARAAIAggBQAOgBARgKQAKgFATgOQAVgPAEgQQACgLgIgTQgFgLgGgDQgFgEgIgDIgPgBIhKgFQgVAAgDgJIgOAAQAAAFgJAJgABqEOQgKgBgOgFIgYgJQgSgIgbgFIgjgHIgBgKIgCgOQAAgNAGgVQAHgXABgLIABgPIAAgPQABgEADgGIAEgLQACgIAAgOIAAgYQgDgTADgOIAFgJIAEgIQABgGAAgPQgBgOABgGQABgIAHgNQAFgPgEgdQgBgSAEgTIAIgWQADgIgBgQQgCgRACgHIAHgQQAEgKAAgGIAAgLQgBgHABgEQABgFADgHQAEgHAAgEQAEgIgCgTQgCgUADgIIACgEQAOAAAOgEIAdgFQAYgEAHgDQAJgCARgIQAQgFAMgCIATgBQAMAAAHgCIAEAYIAWBnIAGAcIAEAdQADAOACAFIAHAYIALAtIALAqIAUBMQAFALADAMIADAaIAGAVQAGAQAFATQAEAQAGALQABAGAHANQAHARAFAaIgBAAIhrAZQgKADgGgDQgIgFAAgMQgDgngUghQgCgBgDAAQgDgEgEgCIAAgCQgcAIgLACQgSAGgHAFQgJAFgIAMQgFAJAAAMIgBAVQAAAMgCAIIgEALQgEAHAAAEQgBAFAAAIIABALIAAACIgOAAgACah7QgFACgCAEQgEAIAAAKIgDBBQgCAZgFAKQgHANgBAFQgBAJAFAIQAEAHAHACQAEADAKABIAQABQAZACAIgMQAGgJgGgOIgFgKQgEgGAAgDIgBgOQAAgIgCgFIgHgNQgDgFABgOQABgOgDgGIgEgGQgEgEAAgDIgBgIIgBgHQAAgLgIgBQgBgBAAAAQgBAAAAgBQgBAAAAAAQgBAAgBAAIgDAAg");
this.shape_5.setTransform(1.8,-0.3);
this.shape_6 = new cjs.Shape();
this.shape_6.graphics.f("#003366").s().p("AkyEmQgDgHABgPQACgQgDgGQgGgNgBgGQgCgFACgHIABgOQAAgGgFgKIgHgSIAAgMQABgIgBgDQgBgKgDgJQgHgQgDgSQgDgUgDgKQgFgLgBgEQgBgEABgGIAAgKQAAgHgCgKIgFgQIgGgcQgEgWgJgWIgHgUIgCgFIABAAIAVgKQAQgGAcgFQAGgFAIgEQARgKAUgDIAAAAQAHAAAHAEIAFgEIABgBIAFAHQACAEAAAFQADAEACAEQADAJACAgQAHAmAAAUIgCAZIACAJIgBAYQgBAPACAJIAGASQAEAMABAGQABAKgBAOIgCAYQgDATAIAJQAGAGAJAAQAJAAADgGQACgDgBgFIAAAAIBpgnIABACQAAAEAHAIQAEAIAAARIgBAxIAAAQIgHAAIABABIhiAhQgaAIgMACIgjAGIglAKIgWAHIgBgDgAG8D1IgMggIgGgVQgGgagOgZQAogkAmguIAqg1QAGgGAIgJQAFgKAEgEIADgBQAJgBACgHQABgHgHgJIgdgpQgIgLgFgFQgUgbgLgMQgPgPgQgKQAZgXAPgRQAKgPAJgJQAKgHALgFQAJAQAdAgQAbAeAJATQALAVAGAGQAFADAGACIADABQAHADAIgCQAGgCAGgGIALgKQAOgQAigWIAlgZQAKAHALAOIAUAXIAZAZQAJAKAJADIgJAIIgbAZIgcAXIg+A2IgOAJIgNAKQgfAZgHAHQgcAYgyAzQgzA0gaAXQgjAfgTASIgBgCgAsYDqIgSABIABgRQgJgPgCgcIgHhjQgCgPAGgJIAFgGQAAgQgCgLQgBgJgGgQIgBggIAAgfIgEggQgHg1gDg9QgDgJADgHIACgCIgEgFIAJAAIAJgCQAEgCACgGIAEgGQA/AAB2AQQAoAFAYAGQAYAGAcAOQAKAFAQAKQAVAQAKANQAMARACAUQABAYgNARIgRAUIgQAWQgJANgJAHQgJAHgXAIIg5ASQghAMgbAFIgaAGQgPAFgJAFIgDACIABAGQAIAaACAkIADA+QAAANgCAJIABAGIgCAAIgEAHQgIAPgbAKQgOAEgMAAQgOAAgLgFgArZhoQgHAGAAAFQAAAEAGAIQAEAFAAAJIACAQQAAAQAHAJIAAAAQAEABADAFQAIADAOAAIAagBQAMgBAOgHIAYgOQASgMADgMQACgJgHgOQgEgIgFgDQgEgDgHgCIgMgBIg+gEQgRAAgCgGIgMAAQgBADgHAHgABYDNQgIAAgMgEIgUgHQgPgGgXgEIgcgFIgBgHIgBgMQAAgJAFgRQAFgRABgIIABgLIAAgMQAAgDADgFIAEgIQABgGAAgLIAAgSQgCgPACgKQAAgCAEgFIADgGQABgFAAgKIAAgQQABgGAGgKQAEgLgDgXQgBgNADgOQAHgOAAgDQACgGgBgMQgBgNACgGQAAgDAFgIQAEgIAAgFIAAgIQgBgGABgDIADgJQADgFAAgDQADgHgBgOQgCgPADgGIACgEQALABAMgDIAYgEQAUgDAGgCIAVgIQAOgEAJgBIAQgBQAKAAAGgCIAEATIASBOIAEAVIAEAWQACALACAEIAGASIAJAiIAJAgIARA6QAEAIACAJIADAUIAFAQQAFAMAEAPQAEAMAEAIIAHAPQAGANAEATIgBAAIhZATQgIADgFgDQgGgDAAgKQgDgdgRgaIgEAAQgDgEgDgBIAAgCIggAIQgPAFgGAEQgIAEgGAJQgEAHAAAJIgBAPQAAAKgCAGIgDAIIgEAJIAAAJIAAAJIAAACIgLgBgACAhdQgEACgCACQgEAGAAAIIgCAyQgCATgDAHQgGAKgBAEQgBAGAEAGQADAGAGACQAEACAIAAIANABQAVACAHgKQAEgGgEgLIgFgIQgDgFAAgBIgBgKQAAgHgBgEIgGgJQgDgFABgKQABgKgCgFIgEgFQgDgDAAgCIgBgHIgBgFQAAgHgHgCQAAAAAAAAQgBgBAAAAQgBAAAAAAQgBAAAAAAIgDAAg");
this.shape_6.setTransform(1.2,-0.9);

我想转换 ：

this.shape_6.graphics.f("#003366").s().p("AkyEmQgDgHABgPQACgQgDgGQgGgNgBgGQgCgFACgHIABgOQAAgGgFgKIgHgSIAAgMQABgIgBgDQgBgKgDgJQgHgQgDgSQgDgUgDgKQgFgLgBgEQgBgEABgGIAAgKQAAgHgCgKIgFgQIgGgcQgEgWgJgWIgHgUIgCgFIABAAIAVgKQAQgGAcgFQAGgFAIgEQARgKAUgDIAAAAQAHAAAHAEIAFgEIABgBIAFAHQACAEAAAFQADAEACAEQADAJACAgQAHAmAAAUIgCAZIACAJIgBAYQgBAPACAJIAGASQAEAMABAGQABAKgBAOIgCAYQgDATAIAJQAGAGAJAAQAJAAADgGQACgDgBgFIAAAAIBpgnIABACQAAAEAHAIQAEAIAAARIgBAxIAAAQIgHAAIABABIhiAhQgaAIgMACIgjAGIglAKIgWAHIgBgDgAG8D1IgMggIgGgVQgGgagOgZQAogkAmguIAqg1QAGgGAIgJQAFgKAEgEIADgBQAJgBACgHQABgHgHgJIgdgpQgIgLgFgFQgUgbgLgMQgPgPgQgKQAZgXAPgRQAKgPAJgJQAKgHALgFQAJAQAdAgQAbAeAJATQALAVAGAGQAFADAGACIADABQAHADAIgCQAGgCAGgGIALgKQAOgQAigWIAlgZQAKAHALAOIAUAXIAZAZQAJAKAJADIgJAIIgbAZIgcAXIg+A2IgOAJIgNAKQgfAZgHAHQgcAYgyAzQgzA0gaAXQgjAfgTASIgBgCgAsYDqIgSABIABgRQgJgPgCgcIgHhjQgCgPAGgJIAFgGQAAgQgCgLQgBgJgGgQIgBggIAAgfIgEggQgHg1gDg9QgDgJADgHIACgCIgEgFIAJAAIAJgCQAEgCACgGIAEgGQA/AAB2AQQAoAFAYAGQAYAGAcAOQAKAFAQAKQAVAQAKANQAMARACAUQABAYgNARIgRAUIgQAWQgJANgJAHQgJAHgXAIIg5ASQghAMgbAFIgaAGQgPAFgJAFIgDACIABAGQAIAaACAkIADA+QAAANgCAJIABAGIgCAAIgEAHQgIAPgbAKQgOAEgMAAQgOAAgLgFgArZhoQgHAGAAAFQAAAEAGAIQAEAFAAAJIACAQQAAAQAHAJIAAAAQAEABADAFQAIADAOAAIAagBQAMgBAOgHIAYgOQASgMADgMQACgJgHgOQgEgIgFgDQgEgDgHgCIgMgBIg+gEQgRAAgCgGIgMAAQgBADgHAHgABYDNQgIAAgMgEIgUgHQgPgGgXgEIgcgFIgBgHIgBgMQAAgJAFgRQAFgRABgIIABgLIAAgMQAAgDADgFIAEgIQABgGAAgLIAAgSQgCgPACgKQAAgCAEgFIADgGQABgFAAgKIAAgQQABgGAGgKQAEgLgDgXQgBgNADgOQAHgOAAgDQACgGgBgMQgBgNACgGQAAgDAFgIQAEgIAAgFIAAgIQgBgGABgDIADgJQADgFAAgDQADgHgBgOQgCgPADgGIACgEQALABAMgDIAYgEQAUgDAGgCIAVgIQAOgEAJgBIAQgBQAKAAAGgCIAEATIASBOIAEAVIAEAWQACALACAEIAGASIAJAiIAJAgIARA6QAEAIACAJIADAUIAFAQQAFAMAEAPQAEAMAEAIIAHAPQAGANAEATIgBAAIhZATQgIADgFgDQgGgDAAgKQgDgdgRgaIgEAAQgDgEgDgBIAAgCIggAIQgPAFgGAEQgIAEgGAJQgEAHAAAJIgBAPQAAAKgCAGIgDAIIgEAJIAAAJIAAAJIAAACIgLgBgACAhdQgEACgCACQgEAGAAAIIgCAyQgCATgDAHQgGAKgBAEQgBAGAEAGQADAGAGACQAEACAIAAIANABQAVACAHgKQAEgGgEgLIgFgIQgDgFAAgBIgBgKQAAgHgBgEIgGgJQgDgFABgKQABgKgCgFIgEgFQgDgDAAgCIgBgHIgBgFQAAgHgHgCQAAAAAAAAQgBgBAAAAQgBAAAAAAQgBAAAAAAIgDAAg");

到 SVG 文件，然后觊觎此代码并重新放置文本

Answer 1

你可以使用 EaselJS 附带的 SVGExporter 类。https://github.com/CreateJS/EaselJS/tree/master/extras/SVGExporter

var exporter = new SVGExporter(this.shape_6, false, false, false);
exporter.run();
document.body.appendChild(exporter.svg);

这将为您创建一个 SVG，您可以使用它做任何您想做的事情。

我对.decodePath()方法进行了逆向工程，以控制台.log原始指令并快速输出内容的外观。它只是形状数据，所以我不确定您打算如何更改文本。

希望有帮助。