如何通过ag-psd解析PSD并区分图片、文本、矩形等精确图层类型？

一、核心图层类型区分逻辑 #

ag-psd返回的图层对象包含type字段及各类专属属性，可通过这些特征精准区分目标图层：

1. 文本图层判断 #

文本图层的type为text，同时包含text属性存储内容，直接判断即可：

function isTextLayer(layer) {
  return layer.type === 'text';
}

2. 形状图层（矩形/圆角矩形）判断 #

矩形、圆角矩形都属于形状图层，type为shape，需通过shapes数组内的type进一步区分：

• 普通矩形：shape.type === 'rectangle'
• 圆角矩形：shape.type === 'rectangle'且包含cornerRadii属性

function isRectangleLayer(layer) {
  if (layer.type !== 'shape') return false;
  return layer.shapes.some(shape => shape.type === 'rectangle');
}

function isRoundedRectangleLayer(layer) {
  if (layer.type !== 'shape') return false;
  return layer.shapes.some(shape => 
    shape.type === 'rectangle' && shape.cornerRadii !== undefined
  );
}

3. 图片图层判断 #

像素类图层（普通图片、智能对象）的type为pixel，若为智能对象还会有smartObject属性：

function isImageLayer(layer) {
  return layer.type === 'pixel' || (layer.type === 'smartObject' && layer.smartObject);
}

二、图层位置与尺寸提取 #

所有图层的位置、尺寸信息统一存储在bounds属性中，结构为[x, y, width, height]，直接解构即可：

function getLayerBounds(layer) {
  const [x, y, width, height] = layer.bounds;
  return { x, y, width, height };
}

三、不支持图层的图片转换处理 #

对于无法识别的图层类型，可利用ag-psd的layer.toPng()方法（需搭配node-canvas或浏览器Canvas环境）将图层转为图片：

async function convertLayerToImage(layer) {
  if (isTextLayer(layer) || isRectangleLayer(layer) || isImageLayer(layer)) {
    return null; // 跳过已支持的图层
  }
  // 转为PNG数据URL或Buffer
  const pngData = await layer.toPng();
  return {
    type: 'converted-image',
    bounds: getLayerBounds(layer),
    imageData: pngData
  };
}

四、完整解析流程示例 #

const { readPsd } = require('ag-psd');
const fs = require('fs');

async function parsePsdToCustomJson(filePath) {
  const psd = await readPsd(fs.readFileSync(filePath), { loadImages: true });
  const customLayers = [];

  for (const layer of psd.children) {
    const layerInfo = {
      bounds: getLayerBounds(layer)
    };

    if (isTextLayer(layer)) {
      layerInfo.type = 'text';
      layerInfo.content = layer.text;
    } else if (isRoundedRectangleLayer(layer)) {
      layerInfo.type = 'rounded-rectangle';
      layerInfo.cornerRadii = layer.shapes.find(s => s.type === 'rectangle').cornerRadii;
    } else if (isRectangleLayer(layer)) {
      layerInfo.type = 'rectangle';
    } else if (isImageLayer(layer)) {
      layerInfo.type = 'image';
      layerInfo.imageData = await layer.toPng();
    } else {
      // 转换为图片
      const converted = await convertLayerToImage(layer);
      if (converted) customLayers.push(converted);
      continue;
    }

    customLayers.push(layerInfo);
  }

  return JSON.stringify({ layers: customLayers }, null, 2);
}

内容的提问来源于stack exchange，提问作者machve