使用 script.alicio.us 作为颜色选择器 -> php GD答案

【问题标题】：use script.alicio.us for color picker -> php GD使用 script.alicio.us 作为颜色选择器 -> php GD
【发布时间】：2011-11-07 01:16:06
【问题描述】：

我想使用颜色选择器来选择两种颜色，然后通过 php/GD 使用这两种颜色绘制一个带有渐变的矩形。

我目前正在使用prototype.js/script.alicio.us

所以，两个颜色选择器 html 字段：

<form>
<p>color 1 #<input type="text" id="colorfield1" value="FF33FF"></p>
<p>color 2 #<input type="text" id="colorfield2" value="CC3366"></p>
</p>
</form>

使用prototype.js，看起来我需要创建某种事件侦听器，然后从中触发我的php脚本。

我觉得应该有点像这样，但不确定：

<script type="text/javascript">
Event.observe(window, 'load', function() {
  Event.observe('colorfield1', 'submit', what goes here???);
  Event.observe('colorfield2 , 'submit', what goes here???);
});
</script>

我正在使用这个颜色选择器代码： http://code.google.com/p/colorpickerjs/

【问题讨论】：

必须是 PHP 吗？您可以使用 CSS gradients 将请求保存到服务器 - 尽管目前这只是 55% supported，但 IE 采用速度很慢。
使用 CSS 渐变的原因是什么，尤其是在仅支持 55% 的情况下？
我不知道细节，但您可能正在构建一个已经依赖现代 HTML5 功能的应用程序。在这种情况下，采用率会高得多，几乎是 100% 的目标受众。在客户端执行此操作的优势在于速度和简单性。
尚未使用 HTML5。这是我正在构建的“开发人员工具”应用程序，可帮助我为硬件平台创建配色方案和 ui 外观/感觉，我将在其中更新我的网络服务器上的颜色和图形，并（几秒钟后）查看结果我的设备在进行刷新调用时的屏幕。在我看来，这些天来最大的推动力是将工作卸载到服务器或云（例如亚马逊 Fire），而不是客户端，这可能是一些缓慢过时的旧硬件。

标签： php gd javascript prototypejs scriptaculous

【解决方案1】：

我同意 @clockworkgeek 关于尝试在客户端执行此操作，但如果我理解正确，您可以像这样使用 ajax 执行此操作：

<script type="text/javascript">
Event.observe(window, 'load', function() {
  Event.observe('colorfield1', 'submit', doFormSubmit);
  Event.observe('colorfield2 , 'submit', doFormSubmit);
});

function doFormSubmit(event) {
  // fire off an ajax request/updater, sending along the values
  // in colorfield1 and colorfield2
  new Ajax.Updater('myImageDisplay', '/myPhpScript.php', {
    parameters: {
      colorfield1: $F('colorfield1'),
      colorfield2: $F('colorfield2')
    }
  });
}
</script>

这将使用输入字段中的数据向您的 php 脚本发出请求。请务必查看Ajax Updater 的文档，看看这是否是您所需要的。

【讨论】：

是的，我想使用 Ajax。是否有理由不使用服务器端脚本来创建 .png 文件？
最大的担忧是请求、处理和返回 png 之间的延迟。如果您可以调整一些 css 而不是需要 ajax 请求，那么您可以在前端处理这一切，并且应用程序会感觉更加响应/即时。

【解决方案2】：

从您链接的页面看来，onClose 事件将是最有用的。（onUpdate 会频繁触发。）

如果您在服务器端生成图像，那么使用图像元素而不是 AJAX 是有意义的。

<form>
    <p>color 1 #<input type="text" id="colorfield1" value="FF33FF"></p>
    <p>color 2 #<input type="text" id="colorfield2" value="CC3366"></p>
    <img src="" id="gradient" />
</form>

document.observe('dom:loaded', function() {
    new Control.ColorPicker('colorfield1', { onClose: update });
    new Control.ColorPicker('colorfield2', { onClose: update });
});

function update(event)
{
    // `this` is the input field
    var url = this.form.action;
    url += (action.indexOf('?') < 0 ? '?' : '&') + this.form.serialize();
    $('gradient').writeAttribute('src', url);
}

【讨论】：