将图形代码转换为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()方法反向设计为console.log原始指令并快速输出您的内容。 它只是形状数据，所以我不确定您打算如何更改文本。

希望有所帮助。