@gaoding/psd-to-templet

    2.2.42-beta.5 • Public • Published

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

    Keywords

    none

    Install

    npm i @gaoding/psd-to-templet

    DownloadsWeekly Downloads

    1

    Version

    2.2.42-beta.5

    License

    ISC

    Unpacked Size

    288 kB

    Total Files

    68

    Last publish

    Collaborators

    • aui
    • baituo
    • bottle1125
    • codert
    • colinleo
    • damonn
    • doodlewind
    • facai
    • jumao
    • kinglisky
    • laoshu133
    • liajoy
    • lijianzhang
    • maple-leaf
    • mljsgto222
    • moocher
    • mutou
    • noahlam
    • sharkseven
    • xuezi
    • zengtiansheng
    • zhb127