图片转svg标注_使用psd.js将PSD转成SVG -- 基础篇（文字&图片）

转载至微信公众号：方凳雅集

背景

随着发展，活动会场页面的题图运营需要线上模板化，而自研的导购素材制作平台接入了海棠-创意中心，通过平台能力，将素材模板化，并且通过配置化的方式生成多种场景化，个性化的素材。但是创意中心的素材模板是基于SVG的，而会场页面的题图基本是基于Photoshop(PS)输出，源文件是PSD。由于SVG是面向矢量图形的标记语言，而PS是以位图处理为中心的图像处理软件，大多时候，PS无法直接导出SVG文件。

为了能让会场页面的题图模板接入到导购素材制作平台，同时降低设计师的使用门槛，我们需要在导购素材制作平台中实现直接将PSD转成SVG的功能，在线化的将PSD转成SVG，然后导入到创意中心，将题图模板化。

[]()

使用psd.js解析PSD

PSD文档是一个二进制文件，官网有相关的格式说明文档。目前，在前端解析PSD文档比较成熟的方案是使用 psd.js ，使用方法和API可以参见这里。

[]()

PSD的JSON结构

可以通过如下的方式导出PSD文档的JSON结构。

const PSD = require('psd');

const psd = PSD.fromFile(file); // file为psd文档的存储路径

psd.parse();

console.log(psd.tree().export());

JSON结构大概如下：

{ children:

[ { type: 'group',

visible: false,

opacity: 1,

blendingMode: 'normal',

name: 'Version D',

left: 0,

right: 900,

top: 0,

bottom: 600,

height: 600,

width: 900,

children:

[ { type: 'layer',

visible: true,

opacity: 1,

blendingMode: 'normal',

name: 'Make a change and save.',

left: 275,

right: 636,

top: 435,

bottom: 466,

height: 31,

width: 361,

mask: {},

text:

{ value: 'Make a change and save.',

font:

{ name: 'HelveticaNeue-Light',

sizes: [ 33 ],

colors: [ [ 85, 96, 110, 255 ] ],

alignment: [ 'center' ] },

left: 0,

top: 0,

right: 0,

bottom: 0,

transform: { xx: 1, xy: 0, yx: 0, yy: 1, tx: 456, ty: 459 } },

image: {} } ] } ],

document:

{ width: 900,

height: 600,

resources:

{ layerComps:

[ { id: 692243163, name: 'Version A', capturedInfo: 1 },

{ id: 725235304, name: 'Version B', capturedInfo: 1 },

{ id: 730932877, name: 'Version C', capturedInfo: 1 } ],

guides: [],

slices: [] } } }

最外层的children描述的是图层信息，是一个数组类型的对象，document描述的是PSD文档全局信息，除了width和height其他不必过多关注，我们需要重点关注的是children下的图层信息。

psd.js也支持导出单个图层的JSON。

// 访问图层节点

const node = psd.tree().childrenAtPath('Version A/Matte')[0];

// or

const node =psd.tree().childrenAtPath(['Version A', 'Matte'])[0];

// 获取图层信息

node.export();

[]()

JSON结构字段说明

图层信息都记录在children数组中，数组的item包含一些公共字段，比如type、name、visible