ps如何生成json

Photoshop如何生成JSON文件：从图像数据到结构化输出

在数据驱动的设计流程中,将图像处理结果转化为结构化的JSON文件，已成为连接设计与开发、提升协作效率的关键需求，UI设计师需要将切图信息（尺寸、路径、颜色）传递给前端开发，游戏美术师需要将角色素材的坐标、帧动画数据导出给引擎，或是自动化工作流中需要批量提取图像元数据，Photoshop（以下简称PS）作为专业图像处理工具，虽未直接提供“一键生成JSON”的功能，但通过脚本扩展、动作批处理、第三方插件等多种方式，完全可以实现从图像数据到JSON文件的自动化生成，本文将详细介绍具体实现路径及代码示例。

为什么需要从PS生成JSON？

在方法前,先明确场景需求：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成，在PS工作流中生成JSON，主要用于：

UI/UX设计：导出组件的尺寸、位置、颜色值（如{"layerName":"按钮","width":120,"height":40,"color":"#007AFF"}）；
游戏开发：导出精灵图（Sprite Sheet）的帧信息、碰撞区域坐标；
数据归档：批量提取图像的元数据（分辨率、色彩模式、创建时间等）；
自动化流程：通过脚本联动其他工具（如Figma、AE），实现设计到开发的闭环。

核心方法：使用ExtendScript脚本生成JSON

PS的核心脚本语言是ExtendScript（基于JavaScript 1.8），可通过“文件>脚本>浏览”运行.jsx文件，这是最灵活、最可控的生成JSON的方式，无需额外工具，可直接访问PS的文档对象模型（DOM），获取图层、通道、历史记录等所有数据。

准备工作：ExtendScript开发环境

工具选择：使用PS自带的ExtendScript Toolkit（可通过开始菜单搜索，或PS中“编辑>首选项>插件>附加模块”路径找到），或第三方编辑器如Visual Studio Code（需安装ExtendScript插件）。
基础语法：ExtendScript与JavaScript基本一致，但提供了PS专属的API（如app.activeDocument表示当前文档，layer.bounds表示图层边界）。

实战案例：导出图层信息为JSON

假设我们有一个PSD文件,包含多个图层（如“背景”“logo”“按钮”），目标是生成一个包含每个图层名称、位置、尺寸、透明度的JSON文件。

步骤1：创建ExtendScript脚本

打开ExtendScript Toolkit，新建一个.jsx文件，输入以下代码：

// 导出图层信息为JSON的脚本
function exportLayersToJSON() {
    // 获取当前活动文档
    var doc = app.activeDocument;
    // 检查是否有图层
    if doc.layers.length === 0) {
        alert("文档中没有图层！");
        return;
    }
    // 初始化JSON数据结构
    var jsonData = {
        documentName: doc.name,
        width: doc.width.value,
        height: doc.height.value,
        layers: []
    };
    // 遍历所有图层（包括组内的子图层）
    function processLayers(layers, parentName) {
        for (var i = 0; i < layers.length; i++) {
            var layer = layers[i];
            var layerData = {
                name: layer.name,
                type: layer.typename, // "ArtLayer"（普通图层）或 "LayerSet"（图层组）
                visible: layer.visible,
                opacity: layer.opacity / 100, // PS中opacity是0-100，转为0-1
                bounds: null,
                children: []
            };
            // 如果是普通图层，获取位置和尺寸
            if (layer.typename === "ArtLayer") {
                var bounds = layer.bounds; // [x1, y1, x2, y2]
                layerData.bounds = {
                    x: bounds[0].value,
                    y: bounds[1].value,
                    width: bounds[2].value - bounds[0].value,
                    height: bounds[3].value - bounds[1].value
                };
                // 可选：获取图层颜色（如纯色图层的填充色）
                if (layer.kind === LayerKind.NORMAL) {
                    var color = layer.backgroundColor;
                    if (color) {
                        layerData.color = {
                            r: color.rgb.red.value,
                            g: color.rgb.green.value,
                            b: color.rgb.blue.value
                        };
                    }
                }
            } 
            // 如果是图层组，递归处理子图层
            else if (layer.typename === "LayerSet") {
                var groupName = parentName ? parentName + "/" + layer.name : layer.name;
                processLayers(layer.layers, groupName);
                layerData.groupName = groupName;
            }
            jsonData.layers.push(layerData);
        }
    }
    processLayers(doc.layers, "");
    // 将JSON对象转换为字符串（格式化输出，便于阅读）
    var jsonString = JSON.stringify(jsonData, null, 4);
    // 保存JSON文件
    var saveFile = File(Folder.desktop + "/layers_info.json");
    saveFile.open("w");
    saveFile.write(jsonString);
    saveFile.close();
    alert("JSON文件已导出到桌面：" + saveFile.fsName);
}
// 执行函数
exportLayersToJSON();

步骤2：运行脚本并查看结果

将上述代码保存为export_layers.jsx，在PS中打开目标PSD文件；
点击“文件>脚本>浏览”，选择export_layers.jsx，点击“打开”；

脚本运行后,会在桌面生成layers_info.json类似：

{
    "documentName": "design.psd",
    "width": 1920,
    "height": 1080,
    "layers": [
        {
            "name": "背景",
            "type": "ArtLayer",
            "visible": true,
            "opacity": 1,
            "bounds": {
                "x": 0,
                "y": 0,
                "width": 1920,
                "height": 1080
            },
            "color": {
                "r": 240,
                "g": 240,
                "b": 240
            }
        },
        {
            "name": "按钮组",
            "type": "LayerSet",
            "visible": true,
            "opacity": 1,
            "groupName": "按钮组",
            "children": [
                {
                    "name": "按钮",
                    "type": "ArtLayer",
                    "visible": true,
                    "opacity": 1,
                    "bounds": {
                        "x": 100,
                        "y": 100,
                        "width": 200,
                        "height": 50
                    }
                }
            ]
        }
    ]
}

扩展：导出图像数据（如像素信息）

若需导出图像的像素数据（如RGBA值），可通过doc.activeLayer.histogram或doc.activeLayer.getPixels()方法（需PS CC 2018+），以下示例导出选中图层的像素数据为JSON：

function exportPixelData() {
    var layer = app.activeDocument.activeLayer;
    if (layer.typename !== "ArtLayer") {
        alert("请选择普通图层！");
        return;
    }
    var width = layer.bounds[2].value - layer.bounds[0].value;
    var height = layer.bounds[3].value - layer.bounds[1].value;
    var pixelData = [];
    // 遍历像素（注意：大尺寸图层会非常慢，建议仅用于小区域）
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            var color = layer.pixelColor(x + layer.bounds[0].value, y + layer.bounds[1].value);
            pixelData.push({
                x: x,
                y: y,
                r: color.rgb.red.value,
                g: color.rgb.green.value,
                b: color.rgb.blue.value,
                a: color.alpha.value
            });
        }
    }
    var jsonString = JSON.stringify({ width: width, height: height, pixels: pixelData }, null, 4);
    var saveFile = File(Folder.desktop + "/pixel_data.json");
    saveFile.open("w");
    saveFile.write(jsonString);
    saveFile.close();
    alert("像素数据已导出！");
}
exportPixelData();