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

最新推荐文章于 2024-03-16 09:52:35 发布

猕猴桃学长

最新推荐文章于 2024-03-16 09:52:35 发布

阅读量1k

点赞数

文章标签：转成数组

本文链接：https://blog.csdn.net/weixin_36071439/article/details/112715237

版权

本文介绍了如何利用psd.js库将Photoshop（PSD）文件转换为SVG，包括解析PSD的JSON结构，处理图像和文字图层。重点讲解了图像的Base64内联和CDN外链方式，以及文字图层的字体、颜色、大小和定位的转换方法。

摘要由CSDN通过智能技术生成

背景

随着发展，活动会场页面的题图运营需要线上模板化，而自研的导购素材制作平台接入了海棠-创意中心，通过平台能力，将素材模板化，并且通过配置化的方式生成多种场景化，个性化的素材。但是创意中心的素材模板是基于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();