PSD.js

Общедоступный парсер PSD, написанный на CoffeeScript. Основан на PSD.rb. Он позволяет работать с документом Adobe Photoshop в управляемой древовидной структуре и получать важные данные, такие как:

• Структура документа
• Размер документа
• Размер слоев/папок + позиционирование
• Названия слоев/папок
• Видимость и прозрачность слоев/папок
• Данные шрифтов (через psd-enginedata)
  • Содержимое областей текста
  • Названия шрифтов, размеры и цвета
• Режим цвета и глубина битов
• Данные маски вектора
• Уровненная информация изображения
• Компоненты слоев

Работает как в NodeJS, так и в браузере (используя browserify). Все ещё отсутствуют некоторые части, присутствующие в PSD.rb, такие как фильтрация компонентов слоев, встроенный рендерер и многие блоки информации о слоях. Конечная цель — полное соответствие функциональности PSD.rb.

Установка

PSD.js не имеет зависимостей на уровне операционной системы. Просто добавьте psd в ваш package.json или выполните команду npm install psd.

Документация

Примечание: работа находится в процессе. Документация с аннотациями доступна здесь. PRO-TIP: если вы хотите узнать, как получить различные метаданные из слоя, вам следует просмотреть этот файл.## Использование PSD.js работает практически одинаково в браузере и NodeJS.

Пример использования в NodeJS

var PSD = require('psd');
var psd = PSD.fromFile("path/to/file.psd");
psd.parse();
console.log(psd.tree().export());
console.log(psd.tree().childrenAtPath('A/B/C')[0].export());

// Вы также можете использовать синтаксис промисов для открытия и анализа
PSD.open("path/to/file.psd").then(function (psd) {
    return psd.image.saveAsPng('./output.png');
}).then(function () {
    console.log("Завершено!");
});

Пример использования в браузере

var PSD = require('psd');

// Загрузка из URL
PSD.fromURL("/path/to/file.psd").then(function(psd) {
    document.getElementById('ImageContainer').appendChild(psd.image.toPng());
});

// Загрузка из события, например, перетаскивание
function onDrop(evt) {
    PSD.fromEvent(evt).then(function (psd) {
        console.log(psd.tree().export());
    });
}

Прохождение по документу

Чтобы получить доступ к документу в виде дерева, используйте psd.tree(), чтобы получить корневую ноду. Оттуда работайте с деревом, используя любые из этих методов:* root(): получить корневой узел от любого места в дереве

• isRoot(): является ли этот узел корневым?
• children(): получить всех непосредственных потомков узла
• hasChildren(): имеет ли этот узел каких-либо потомков?
• childless(): противоположность hasChildren()
• ancestors(): получить всех предков в пути этого узла (не считая корневого узла)
• siblings(): получить все братские узлы дерева, включая текущий (например, все слои в папке)
• nextSibling(): получить ближайшего следующего брата узла
• prevSibling(): получить ближайшего предыдущего брата узла
• hasSiblings(): имеет ли этот узел какие-либо братьев?
• onlyChild(): противоположность hasSiblings()
• descendants(): получить всех потомков узлов, не включая текущий
• subtree(): то же самое, что и descendants, но начинается с текущего узла
• depth(): вычислить глубину текущего узла (корневой узел равен 0)
• path(): получить путь до текущего узла Если вы знаете путь к группе или слою внутри дерева, вы можете выполнять поиск по этому пути. Обратите внимание, что это всегда возвращает массив, так как имена слоев/групп могут не быть уникальными. Поиск всегда ограничен потомками текущего узла.```js psd.tree().childrenAtPath('Version A/Matte'); psd.tree().childrenAtPath(['Version A', 'Matte']);

### Доступ к данным слоя
Чтобы получить данные, такие как имя или размеры слоя:

```js
node = psd.tree().descendants()[0];
node.get('name');
node.get('width');

Файлы PSD также хранят различные данные в блоках "layer info". Увидеть этот файл для всех возможных блоков информации слоя, которые парсит PSD.js (в LAYER_INFO). Какие блоки имеют слои различаются от слоя к слою, но чтобы получить доступ к ним, можно сделать следующее:

node = psd.tree().descendants()[0]
node.get('typeTool').export()
node.get('vectorMask').export()

Экспорт данных

Работая со структурой дерева, вы можете рекурсивно экспортировать любой узел в объект. Это не выгружает все данные, но включает наиболее часто используемые данные.

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

Что производит что-то вроде:```js { 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: 'нормальный',
            name: 'Сделайте изменения и сохраните.',
            left: 275,
            right: 636,
            top: 435,
            bottom: 466,
            height: 31,
            width: 361,
            mask: {},
            text: 
             { value: 'Сделайте изменения и сохраните.',
               font: 
                { name: 'HelveticaNeue-Light',
                  sizes: [ 33 ],
                  colors: [ [ 85, 96, 110, 255 ] ],
                  alignment: [ 'по центру' ] },
               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: 'Версия A', capturedInfo: 1 },
               { id: 725235304, name: 'Версия B', capturedInfo: 1 },
               { id: 730932877, name: 'Версия C', capturedInfo: 1 } ],
             guides: [],
             slices: [] } } }
```
Вы также можете экспортировать PSD в сглаженное изображение. Обратите внимание, что на данный момент не поддерживаются все режимы изображений и глубины.```js
png = psd.image.toPng(); // Получить объект PNG
psd.image.saveAsPng('путь/к/выводу.png').then(function() {
  console.log('Экспорт завершен!');
});
```

Это использует полное растринированное представление, предоставленное Photoshop. Если файл был сохранён без включённого режима совместимости, это вернёт пустое изображение.