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

use script.alicio.us for color picker -> php GD

本文关键字：GD php 选择器 颜色 alicio script us 使用      更新时间：2023-09-26

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

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

那么，两个颜色选择器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/

我同意@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的文档，看看这是否是您所需要的。

从您链接的页面来看，onClose事件将是最有用的。(onUpdate会经常开火)

如果在服务器端生成图像，那么使用image元素而不是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);
}
相关文章：