Samples

创建一个新层

你可以创建一个脚本，在Photoshop DOM API的帮助下，创建一个新的图层。

const app = require('photoshop').app;
await app.documents.add();
await app.activeDocument.createLayer();
app.activeDocument.layers[0].name = 'New layer';
CopyCopied to your clipboard
1const app = require('photoshop').app;
2await app.documents.add();
3await app.activeDocument.createLayer();
4app.activeDocument.layers[0].name = 'New layer';

访问本地文件系统

你可以在UXP存储模块的帮助下，创建一个访问你的本地文件系统的脚本。

const uxpfs = require("uxp").storage;
const ufs = uxpfs.localFileSystem;

try {
    const folder = await ufs.getTemporaryFolder()
    const metadata = await folder.getMetadata();
    console.log(JSON.stringify(metadata));
} catch (e) {
    console.log(`Local File system error: ${e}`);
}
CopyCopied to your clipboard
1const uxpfs = require("uxp").storage;
2const ufs = uxpfs.localFileSystem;
3
4try {
5    const folder = await ufs.getTemporaryFolder()
6    const metadata = await folder.getMetadata();
7    console.log(JSON.stringify(metadata));
8} catch (e) {
9    console.log(`Local File system error: ${e}`);
10}

使用文件选取器

你可以创建一个脚本，实例化一个文件选择器，用于写入/保存到文件。

const fs = require('uxp').storage.localFileSystem;
try {
    // 使用文件选择器将文件保存到一个位置
    const file = await fs.getFileForSaving("demo.txt");
    await file.write("Hello World! This is demo.");
} catch (e) {
    console.log(e);
}
CopyCopied to your clipboard
1const fs = require('uxp').storage.localFileSystem;
2try {
3    // 使用文件选择器将文件保存到一个位置
4    const file = await fs.getFileForSaving("demo.txt");
5    await file.write("Hello World! This is demo.");
6} catch (e) {
7    console.log(e);
8}

Read/write to clipboard

你可以访问剪贴板模块 (navigator.clipboard) 至:

• 写到剪贴板上 (setContent())
• 读取剪贴板的内容 (readText())

try {
    const clipboard = navigator.clipboard;
    await clipboard.setContent({ 'text/plain': "Test string" });
} catch (e) {
    throw new Error(e);
}
try {
    const clipboard = navigator.clipboard;
    const text = await clipboard.readText();
    console.log(text);
}  catch (e) {
    throw new Error(e);
}
CopyCopied to your clipboard
1try {
2    const clipboard = navigator.clipboard;
3    await clipboard.setContent({ 'text/plain': "Test string" });
4} catch (e) {
5    throw new Error(e);
6}
7try {
8    const clipboard = navigator.clipboard;
9    const text = await clipboard.readText();
10    console.log(text);
11}  catch (e) {
12    throw new Error(e);
13}

创建对话式UI

简单的例子

async function createDialog() {
    const dialog = document.createElement("dialog");
    dialog.style.color = "white";
    const div = document.createElement("div");
    div.style.display = "block";
    div.style.height = "200px";
    div.style.width = "400px";
    const header = document.createElement("h2");
    header.id = "head";
    header.style.color = "white";
    header.textContent = "Sample Dialog";
    div.appendChild(header);
    dialog.appendChild(div);
    await document.body.appendChild(dialog).showModal();
}
// 等待对话框的渲染
await createDialog();
CopyCopied to your clipboard
1async function createDialog() {
2    const dialog = document.createElement("dialog");
3    dialog.style.color = "white";
4    const div = document.createElement("div");
5    div.style.display = "block";
6    div.style.height = "200px";
7    div.style.width = "400px";
8    const header = document.createElement("h2");
9    header.id = "head";
10    header.style.color = "white";
11    header.textContent = "Sample Dialog";
12    div.appendChild(header);
13    dialog.appendChild(div);
14    await document.body.appendChild(dialog).showModal();
15}
16// 等待对话框的渲染
17await createDialog();

有 "完成 "按钮的例子

async function showDialog() {
    let dialog = createDialog();
    document.body.appendChild(dialog).showModal();

    // Give the script time to show the dialog by returning a promise. Make sure that it is resolved/rejected later.
    return new Promise((resolve, reject) => {
        try {
            // Resolve the promise and dismiss the dialog when when user clicks on 'Done' button
            const doneBtn = document.getElementById("完成");
            doneBtn.addEventListener("click", () => {
                console.log("user is done");
                dialog.close();
                resolve("user is done");
            })

            // reject when dialog is cancelled/closed
            dialog.addEventListener("cancel", () => {
                console.log("dialog cancelled");
                reject("dialog cancelled");
            });

            dialog.addEventListener("close", () => {
                console.log("dialog closed");
                reject("dialog closed");
            });
        } catch (e) {
            console.log(e);
            reject(e);
        }
    })
}

function createDialog() {
    const dialog = document.createElement("dialog");
    dialog.style.color = "white";
    const div = document.createElement("div");
    div.style.display = "block";
    div.style.height = "200px";
    div.style.width = "400px";
    const header = document.createElement("h2");
    header.id = "head";
    header.style.color = "white";
    header.textContent = "Sample Dialog";
    div.appendChild(header);
    const doneButton = document.createElement("button");
    doneButton.id = "done";
    doneButton.textContent = "Done";
    div.appendChild(doneButton);
    dialog.appendChild(div);
    return dialog;
}

// 等待对话框的渲染
await showDialog();
CopyCopied to your clipboard
1async function showDialog() {
2    let dialog = createDialog();
3    document.body.appendChild(dialog).showModal();
4
5    // Give the script time to show the dialog by returning a promise. Make sure that it is resolved/rejected later.
6    return new Promise((resolve, reject) => {
7        try {
8            // Resolve the promise and dismiss the dialog when when user clicks on 'Done' button
9            const doneBtn = document.getElementById("完成");
10            doneBtn.addEventListener("click", () => {
11                console.log("user is done");
12                dialog.close();
13                resolve("user is done");
14            })
15
16            // reject when dialog is cancelled/closed
17            dialog.addEventListener("cancel", () => {
18                console.log("dialog cancelled");
19                reject("dialog cancelled");
20            });
21
22            dialog.addEventListener("close", () => {
23                console.log("dialog closed");
24                reject("dialog closed");
25            });
26        } catch (e) {
27            console.log(e);
28            reject(e);
29        }
30    })
31}
32
33function createDialog() {
34    const dialog = document.createElement("dialog");
35    dialog.style.color = "white";
36    const div = document.createElement("div");
37    div.style.display = "block";
38    div.style.height = "200px";
39    div.style.width = "400px";
40    const header = document.createElement("h2");
41    header.id = "head";
42    header.style.color = "white";
43    header.textContent = "Sample Dialog";
44    div.appendChild(header);
45    const doneButton = document.createElement("button");
46    doneButton.id = "done";
47    doneButton.textContent = "Done";
48    div.appendChild(doneButton);
49    dialog.appendChild(div);
50    return dialog;
51}
52
53// 等待对话框的渲染
54await showDialog();

访问已安装的字体

Photoshop 已将字体模块的权限设置为 ReadInstalled.。这意味着，如果没有指定字体或没有安装字体，那么 UXP 将退回到 "system-ui "字体（默认的操作系统系统 UI 字体）。

async function createDialog() {
    const dialog = document.createElement("dialog");

    dialog.style.color = "white";

    const div = document.createElement("div");
    div.style.display = "block";
    div.style.height = "200px";
    div.style.width = "450px";

    const p1 = createParagraph("system-ui"); // use default OS font
    const p2 = createParagraph("non-existent-font"); // try using a non existent font. Will resolve to OS default.
    const p3 = createParagraph("Courier New"); // use any installed font
    div.appendChild(p1);
    div.appendChild(p2);
    div.appendChild(p3);

    dialog.appendChild(div);
    await document.body.appendChild(dialog).showModal();
}

function createParagraph(fontFamily) {
    const p = document.createElement("p");
    p.style.color = "white";
    p.style.fontFamily = fontFamily;
    p.textContent = `font-family:${fontFamily}: 狐狸跳过懒惰的狗`;
    return p;
}

// Wait for the dialog to render
await createDialog();
CopyCopied to your clipboard
1async function createDialog() {
2    const dialog = document.createElement("dialog");
3
4    dialog.style.color = "white";
5
6    const div = document.createElement("div");
7    div.style.display = "block";
8    div.style.height = "200px";
9    div.style.width = "450px";
10
11    const p1 = createParagraph("system-ui"); // use default OS font
12    const p2 = createParagraph("non-existent-font"); // try using a non existent font. Will resolve to OS default.
13    const p3 = createParagraph("Courier New"); // use any installed font
14    div.appendChild(p1);
15    div.appendChild(p2);
16    div.appendChild(p3);
17
18    dialog.appendChild(div);
19    await document.body.appendChild(dialog).showModal();
20}
21
22function createParagraph(fontFamily) {
23    const p = document.createElement("p");
24    p.style.color = "white";
25    p.style.fontFamily = fontFamily;
26    p.textContent = `font-family:${fontFamily}: 狐狸跳过懒惰的狗`;
27    return p;
28}
29
30// Wait for the dialog to render
31await createDialog();

Last updated 3/3/2023

Was this helpful?

Yes

No