@gaoding/psd-to-templet

transform psd into templet

Stats

StarsIssuesVersionUpdatedCreatedSize
@gaoding/psd-to-templet
2.2.42-beta.52 years ago3 years agoMinified + gzip package size for @gaoding/psd-to-templet in KB

Readme

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 = [{
      name: '',
      meta_data: {
          emSize: 1000,
          ascent: 1015,
          descent: -206
      }
    }]
    

parseFolderLayout

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

  • type: Boolean
  • default: false

parseGlobalBackground 是否解析长页面全局背景

  • 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: headcontentblock

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: flatmergetag

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,
}]

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.