используйте script.alicio.us для выбора цвета -> php GD - PullRequest
Новая
       9

используйте script.alicio.us для выбора цвета -> php GD

0 голосов
/ 07 ноября 2011

Я хочу использовать палитру цветов, чтобы выбрать два цвета, а затем нарисовать прямоугольник с градиентом, используя два цвета, через 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/

Ответы [ 2 ]

0 голосов
/ 08 ноября 2011

Со страницы, на которую вы ссылаетесь, похоже, что событие 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);
}
0 голосов
/ 07 ноября 2011

Я согласен с @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 , чтобы узнать, подходит ли вам это.

...