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

预览图层

Blob url

Data URL

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

实时预览active图层

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

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

很多操作会触发select事件，通过过滤可以优化预览次数：

ts 复制代码

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

以png格式读取图层数据

背景：需要把某个图层的数据以png格式保存到云端，待后续使用。但uxp未提供接口把imagedata转换成png文件，也没有提供web canvas的高级用法添加imagedata。本实现借助batchPlay，把单图层保存成临时的png文件。关键代码：

js 复制代码

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的方法处理文件，上传数据

ts 复制代码

// 图层中文名要解码
const file = (await folder.getEntry(`${decodeURI(layer.name)}.png`)) as storage.File;
return (await file.read({ format: formats.binary })) as ArrayBuffer;

把图片当作新图层创建

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

把图片转成imagedata（canvas），然后使用imaging方法完成操作。
使用batchPlay把图片导入到选框selection里。ps为了图片显示，会默认对图片大小做调整，导入后可能需要对图层做layer.scale()缩放。

方法1思路比较简单。难点在把图片转成imagedata，要用到webview（iframe）转换。本文只提供思路。方法2，把文件置入图层placeEvent关键代码：

ts 复制代码

  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图层

预览图层

Blob url

Data URL

实时预览active图层

以png格式读取图层数据

把图片当作新图层创建

总结

参考