psd-to-templet

transform psd into templet

Installation

use npm

npm install psd-to-templet

Usage

import psdToTemplet from 'psd-to-templet';

psdToTemplet(file, options)
.then(res => {})
.catch(err => {})

feature detect

// 自定义特性检测
var customFeatureDetection = {
    name: 'xxx', // 特性检测名
    scope: 'layer', // 特性检测对象，layer | group | canvas(整个psd)
    /*
     * @param {object} layer - 原图层信息
     * @param {object} elem - 解析后的图层信息
     * @return {boolean|promise} - 返回布尔值true/false，或返回promise
     */
    detection(layer, elem) {}
};

var featureDetections = psdToTemplet.defaultFeatureDetections;
featureDetections.push(customFeatureDetection);

psdToTemplet(file, {
    featureDetections: featureDetections,
    onDetectFail(featureDetect, error) {
        // deal with error
    }
});

// defaultFeatureDetections
psdToTemplet.defaultFeatureDetections = [{
    name: 'effect',
    scope: 'layer',
    detection(layer, elem) {
        var effectsData = layer.objectEffects
            ? layer.objectEffects().data
            : null;

        if(!effectsData) {
            return true;
        }
        Object.keys(effectsData).forEach(function(key) {
            var parser = effectsParsers[key];

            if(!parser) {
                return false;
            }
        });

        return true;
    }
}, {
    name: 'blendMode',
    scope: 'layer',
    detection(layer, elem) {
        const blendKey = layer.blendMode.blendKey;
        const parser = blendModeParsers[blendKey];

        if(blendKey !== 'norm' && !parser) {
            return false;
        }
        return true;
    }
}];

Options

parseWidget

是否解析多样式部件 详细文档

fontMetricsMap

模板中所使用到的字体信息，用于字体位置偏移的调整，包括字体的EmSize,Ascent,Descent，默认维护了一份常用字体。

• type: Object

const fontMetricsMap = {
     'DIN-Bold': {
        EmSize: 1000,
        Ascent: 1015,
        Descent: 206,
    },
}

parseFolderLayout

是否将默认的一级文件解析成 layout

• type: Boolean
• default: false

useBackgroundRect

是否使用背景元素作为 layout 大小

• type: Boolean
• default: false

ignoreMetaInfo

是否忽略元信息，仅返回图层信息，若为false，则返回object格式

• type: Boolean
• default: true

defaultTextType

Specifies the scale type of text

• type: String
• default: block
• options: head、content、block

parseSVG:

while false, parse svg as png

• type: Boolean
• default: true

groupMode:

Specifies the mode of parsing groups，while tag, remember to name group as [group]*

• type: String
• default: flat
• options: flat、merge、tag

canvasFeatureDetections:

canvas 特性检测

• type: Array

groupFeatureDetections:

组元素特性检测

• type: Array

layerFeatureDetections:

图层元素特性检测 *type: Array

imageQuality:

• type: Number
• default: 60

imageMaxWidth:

• type: Number

imageMaxHeight:

• type: Number

onProgress:

• type: Function
• usage:

onProgress(data) {
    var message = data.message;
    var progress = data.progress;
}

Output

[{
    backgroundColor: "#FFFFFF",
    elements: [{
        type: 'group',
        elements: [{
            height: 321,
            left: 0,
            opacity: 1,
            top: 0,
            type: "image",
            url: "data:image/jpeg;base64",
            width: 1242
        }],
        height: 321,
        left: 0,
        top: 1887,
        width: 1242
    }, {
        color: '#000000',
        content: '哈哈哈哈哈',
        fontFamily: 'FZLTTHK--GBK1--0',
        fontSize: 57,
        fontStyle: 'normal',
        fontWeight: 400,
        height: 80.646,
        left: 320,
        letterSpacing: 0,
        lineHeight: 1.2,
        opacity: 1,
        resize: 7,
        textAlign: 'center',
        textDecoration: 'none',
        top: 56.019,
        transform: {a: 1, b: 0, c: -0, d: 1, tx: 0, ty: 0},
        type: 'text',
        width: 602
    }],
    height: 2208,
    title: null,
    width: 1242,
}]