Adobe uxp插件处理Layer图层记录使用adobe uxp操作图层的几个功能。预览图层、实时预览画布、把图层保存

记录使用uxp操作图层的几个功能。

预览图层

Blob url

Data URL(支持jpeg)

注意：getPixels()的一个奇怪的参数字段: applyAlpha: true

实时预览active图层

uxp使用action.addNotificationListener监听宿主事件。PS图层受影响的事件分别是：

historyStateChanged 历史记录
close 关闭文档
select 切换图层、文档

很多操作会触发select事件，过滤事件优化读取数据频率：

const refs = ['document', 'layer']; // 切换事件
if (!descriptor._target?.some((item: { _ref: string }) => refs.includes(item._ref))) return;
// 预览图层
// ...

把imageData保存成本地图片

步骤如下：

imageData: 手动创建或通过imagingapi获取
利用imaging.encodeImageData把imageData转成base64字符串
使用fecth把data URL转成arrayBuffer
通过require('uxp').storage.localFileSystem写入文件

部分代码：

const jpegData = await imaging.encodeImageData({"imageData": imageData, "base64": true});
const url = 'data:image/jpeg;base64,' + jpegData;
const ab = await url2ab(url); // fetch url

const file = await localFileSystem.getFileForSaving("output.jpg", { types: [ "jpg" ]});
await file.write(ab, {format: formats.binary});

把某图层保存成png文件

背景：把当前选中的图层以png格式保存到云端，待后续使用。但uxp只提供了画布的保存document.saveAs.png()和获取单图层的imagedata, 未提供接口把imagedata转换成png文件，也没有提供web canvas的高级用法添加imagedata。本实现借助batchPlay，自动把单图层保存成以图层名命名的png文件。

实践发现，文件非实时落入磁盘。后续操作应延迟读取文件

exportSelectionAsFileTypePressed关键代码：

action.batchPlay([{
    _obj: 'exportSelectionAsFileTypePressed',
    _target: {
        _ref: 'layer',
        _enum: 'ordinal',
        _value: 'targetEnum'
    },
    fileType: 'png',
    quality: 32,
    metadata: 0,
    destFolder: folder.nativePath, // string 临时目录
    sRGB: true,
    openWindow: false,
    _options: {
        dialogOptions: 'dontDisplay'
    },
},
], {});

有了png文件后，使用storage.localFileSystem提供的方法处理文件${layer.name}.png

// 在临时目录内通过文件名查找文件。注意图层中文名要解码
// 非实时生成，可能要延迟获取
const file = (await folder.getEntry(`${decodeURI(layer.name)}.png`)) as storage.File;
// 读取png文件二进制流
return (await file.read({ format: formats.binary })) as ArrayBuffer;

把图片当作新图层创建

背景：本地或远端图片添加到ps图层中。方法有两种

把图片转成imagedata（canvas），然后使用imaging提供的方法完成操作。
使用batchPlay把图片导入到选框selection里。

为了图片显示，ps会默认对图片大小做调整，导入后可能需要对图层做layer.scale()缩放。

方法1，思路比较简单。难点在把图片转成imagedata，要用到webview（iframe）转换或使用解码图片的类库@vivaxy/png。本文只提供思路。
方法2，创建选区selection，然后把文件置入图层。placeEvent关键代码：

  await executeAsModal(
    async () =>
      batchPlay(
        [
          {
            _obj: 'placeEvent',
            null: {
              _path: token, // storage.localFileSystem.createSessionToken(file)
              _kind: 'local',
            },
            freeTransformCenterState: {
              _enum: 'quadCenterState',
              _value: 'QCSCorner0',
            },
            offset: {
              _obj: 'offset',
              horizontal: { _unit: 'pixelsUnit', _value: 0.0 },
              vertical: { _unit: 'pixelsUnit', _value: 0.0 },
            },
            _isCommand: true,
            _options: {
              dialogOptions: 'dontDisplay',
            },
          },
        ],
        {}
      ),
    {
      commandName: 'import image file',
    }
  );

总结

uxp插件开发体验类似小程序开发，增加了一些nodejs能力，也弱化了web的能力，比如canvas。操作图片的API还不健全，很多时候只能借助魔法batchPlay处理。

欢迎一起交流学习

Adobe uxp插件处理Layer图层