用JavaScript写Photoshop脚本（Photoshop Scripting），批处理图片

遇到一个日常，要用Photoshop 导出一批图片。
这些图片不同的是里面的文字参数，而且图片很多。
繁杂的工作当然用代码解决。
于是决定温习下Photoshop Scripting， 用JavaScript写Photoshop脚本，自动修改文本内容并且批量压缩导出图片。

先看成果(自动生成的文字图层)：

自动生成的文字图层

每张图片长的类似下图：

图片

每张图片只需要改变红色字体那部分参数。
如果用Photoshop一个地改，每张改7个文本，可能有20张，那就要操作140次了。

技术

JavaScript、Photoshop Scripting

思路（我也想用ES6, 不过不支持）

准备：如何执行脚本

1 首先新建一个拓展名为[.jsx]或[.js]的文件，在文件写上alert(‘Hello’)；
2 然后打开Photoshop，执行‘文件’-‘脚本’-‘浏览’，载入你的脚本就可以执行，接着就会看到Photoshop弹出‘Hello’。

一 把每张图片的数据组成一个对象, 所有对象组成一个数据数组，数据代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
//数据
var datas = [
    {
        name    : '游龙',
        lengthes: '16cm',
        height  : '8cm',
        width   : '3cm',
        weight  : '210g',
        spec    : '一件',
        price   : '¥50'
    },
    ......
];

二 分析Photoshop文档的文字图层，给文字图层命名。

（lengthes这个是防止与数组自带属性length冲突）

文字图层

三 获取当前Photoshop文档的这7个文字图层，首先尝试获取一个图层，下面获取‘name’这个文字图层

1
2
3
4
5
6
7
8
9
var docRef = app.activeDocument,//获取当前文档
    dataLayerSets = docRef.layerSets.getByName('data'),//layerSets是图层文件集合，也就是图片中的data文件夹，获取名为‘data’的图层组
    dataArtLayers = dataLayerSets.artLayers;//对应data文件夹下的所有图层，获取该图层组的子集所有图层集合

    /*
     * 当一个图层是文本图层，即它的类型是LayerKind.Text，该图层对象会具有textItem这个对象属性，该属性存储文本的信息，如文本内容，颜色，字体等等
     * dataArtLayers['name'].textItem.contents 指的是name这个文本图层的内容
    */
    dataArtLayers['name'].textItem.contents   = '我是类型';//这样，name这个文本图层的内容就会被修改为‘我是类型’

四 上面既然会单个修改文本图层了，那下面循环修改文字图层并且生成相应质量的图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var KEYS = ['name', 'lengthes', 'height', 'width', 'weight', 'spec', 'price'];//抽取keys出来，方便优化
/*
 * 循环修改文字图层并且生成相应质量的图片
*/
for (var i=0; i<datas.length; i++) {
    var dataItem = datas[i];

    for (var j = 0; j < KEYS.length; j++) {
        dataArtLayers[KEYS[j]].textItem.contents = dataItem[KEYS[j]];
    }
    //这个循环等价于：
    // dataArtLayers['name'].textItem.contents   = dataItem['name'];
    // dataArtLayers['lengthes'].textItem.contents = dataItem['lengthes'];
    // dataArtLayers['height'].textItem.contents = dataItem['height'];
    // dataArtLayers['width'].textItem.contents  = dataItem['width'];
    // dataArtLayers['weight'].textItem.contents = dataItem['weight'];
    // dataArtLayers['spec'].textItem.contents   = dataItem['spec'];
    // dataArtLayers['price'].textItem.contents  = dataItem['price'];
    outputFolderImg = new File(outputFolder + '/' + dataItem['name'] + '.jpg');//文件名字以及路径
    docRef.exportDocument(outputFolderImg, ExportType.SAVEFORWEB, exportOptions);//导出该文件
}

五 完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
preferences.rulerUnits = Units.PERCENT;

var docRef        = app.activeDocument,//获取当前文档
    dataLayerSets = docRef.layerSets.getByName('data'),//获取名为‘data’的图层组
    dataArtLayers = dataLayerSets.artLayers//获取该图层组的子集所有图层

var outputFolder  = Folder.selectDialog('选择输出的文件夹'),
    outputFolderImg;//存放文件名字以及路径

var exportOptions = new ExportOptionsSaveForWeb();//图片输出设置

var KEYS          = ['name', 'lengthes', 'height', 'width', 'weight', 'spec', 'price'];//抽取keys出来，方便优化
//数据
var datas = [
    {
        name    : '小行龙',
        lengthes: '10cm',
        height  : '6cm',
        width   : '2cm ～ 2.2cm',
        weight  : '180g * 2(一对)',
        spec    : '一对（该产品是按双购买）',
        price   : '¥38'
    },
    ......
];
/*
 * 图片输出设置
*/
exportOptions.format  = SaveDocumentType.JPEG;//设置图片格式
exportOptions.quality = 60;//设置图片质量
/*
 * 循环修改文字图层并且生成相应质量的图片
*/
for (var i=0; i<datas.length; i++) {
    var dataItem = datas[i];
    for (var j = 0; j < KEYS.length; j++) {
        dataArtLayers[KEYS[j]].textItem.contents = dataItem[KEYS[j]];
    }
    outputFolderImg = new File(outputFolder + '/' + dataItem['name'] + '.jpg');//文件名字以及路径
    docRef.exportDocument(outputFolderImg, ExportType.SAVEFORWEB, exportOptions);//导出该文件
}
alert('ooo，' + datas.length + '张图片完全加工出来啦~');

六 拓展

其实掌握了Photoshop Script编写脚本, 不仅仅只是导入脚本，还可以实现界面化操作的插件（其实是一个html5的拓展），如下图：

自己尝试写的一个界面化插件

是不是想起了GuideGuide？只要有耐心，你创作出一个插件完全有可能！

而且，写Photoshop插件，不仅限制于JavaScript一门语言哦～

要了解更多，可以看文档：

Adobe Photoshop Scripting（Adobe Photoshop Scripting）
A Short Guide to HTML5 Extensions | Adobe Developer Connection（HTML5 Extensions）