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

发布于 2024-12-13 21:28:41 字数 831 浏览 5 评论 0原文

我想使用颜色选择器来选择两种颜色，然后通过 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/

原文

I want to use a color picker to pick two colors and then draw a rectangle with a gradient using the two colors, via php/GD.

I'm currently working with prototype.js/script.alicio.us

So, two color picker html fields:

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

With prototype.js, it looks like I need to create some kind of event listener and then trigger off my php script from that.

I think it should look a little bit like this, but am not certain:

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

I'm using this color picker code:
http://code.google.com/p/colorpickerjs/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那些过往 2024-12-20 21:28:41

我同意@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 的文档以了解如果这是你所需要的。

I agree with @clockworkgeek about trying to do this client-side, but if I understand you correctly, you could do this with ajax like so:

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

This will make a request to your php script with the data from the input fields. Be sure to check out the documentation for Ajax Updater to see if this is what you need.

回复收藏 0 原文

清秋悲枫 2024-12-20 21:28:41

从您链接的页面来看，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);
}

From the page you linked it looks like the onClose event will be most useful. (onUpdate will fire too often.)

If you are generating an image server-side then it makes sense to use an image element instead of 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);
}

回复收藏 0 原文

~没有更多了~