尝试从 JavaScript 函数中的文本输入引用值时卡住

Question

我正在尝试为 Photoshop 创建一个插件。我的文件结构如下（按照 Adobe 关于构建插件的指南中的建议）：

我的根文件夹包含两个文件夹：客户端和主机。客户端文件夹包含 index.html 和 index.js。 Index.html 提供了设计并引用了两个 javascript 文档。 Index.js 包含对 index.html 中元素的引用，并向下面提到的 index.jsx 文件夹中包含的触发函数发送说明。

主机文件夹包含 index.jsx，其中包含实际触发 photoshop 工具的所有功能。为了获得此 javascript 代码，我在 mac 上使用了 xtools 将我创建的 photoshop 动作转换为 .jsx 文件。

我希望我的插件有一个文本框，用户可以在其中输入一个值（它必须是一个数字），然后点击一个按钮来触发一个函数，其中一部分我需要包含值他们输入的数字。

在此示例中，该函数会将图像的大小调整为用户所需的像素数。

(注意：-当函数中的数字为 static/preset 并且按钮仅在没有任何其他输入的情况下触发该函数时，脚本可以完美运行-我只是在努力从文本框中获取值进入函数）。

这是每个文档的代码：

index.html:

<input type="text" id="resizeinput" placeholder="enter value in pixels">
<button id="resizebutton">Go!</button>

Index.js:

var customresize = document.querySelector("#resizebutton");

customresize.onclick = function() {
  csInterface.evalScript("ResizeCustom()");
};

Index.jsx:

cTID = function(s) { return app.charIDToTypeID(s); };
sTID = function(s) { return app.stringIDToTypeID(s); };

//
//==================== Resize Custom ==============
//
function ResizeCustom() {
  // Image Size
  function step1(enabled, withDialog) {
    if (enabled != undefined && !enabled)
      return;
    var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
    var desc1 = new ActionDescriptor();
    desc1.putUnitDouble(cTID('Wdth'), cTID('#Pxl'), 1234);
    desc1.putBoolean(sTID("scaleStyles"), true);
    desc1.putBoolean(cTID('CnsP'), true);
    desc1.putEnumerated(cTID('Intr'), cTID('Intp'), sTID("bicubicSmoother"));
    executeAction(sTID('imageSize'), desc1, dialogMode);
  };

  step1();      // Image Size
};

index.jsx 中的 JavaScript 表示“1234”是我需要引用在文本框“#resizeinput”中输入的值的地方。

到目前为止，我最好的选择是将 1234 替换为： document.getElementById("#resizeinput").value)

但是没有用。

Answer 1

在你的Index.js中：

var customresize = document.querySelector("#resizebutton"),
    resizeInput = document.querySelector("#resizeinput");

customresize.onclick = function()
{
    csInterface.evalScript("ResizeCustom(" + resizeInput.value + ")");

};

在 Index.jsx:

cTID = function(s) { return app.charIDToTypeID(s); };
sTID = function(s) { return app.stringIDToTypeID(s); };

function ResizeCustom(_arg) {
    var desc1 = new ActionDescriptor();
    desc1.putUnitDouble(cTID('Wdth'), cTID('#Pxl'), _arg);
    desc1.putBoolean(sTID("scaleStyles"), true);
    desc1.putBoolean(cTID('CnsP'), true);
    desc1.putEnumerated(cTID('Intr'), cTID('Intp'), sTID("bicubicSmoother"));
    executeAction(sTID('imageSize'), desc1, DialogModes.NO);
};

请注意，这不会进行任何检查（如果您尝试传递字符串，则会出现错误）。

p.s。在 Abdobe 插件的世界中，插件是用 C++ 编写的，HTML 面板是扩展。以防万一:)

p.p.s 我建议查看 Davide Barranca 的博客 HTML 面板提示，例如关于将数据从 JS 传递到 JSX：HTML Panels Tips: #4 passing Objects from HTML to JSX

尝试从 JavaScript 函数中的文本输入引用值时卡住

Stuck trying to reference value from text input in JavaScript function

javascript

extendscript