Question

我对服务器端技术并不擅长（很难将我的想法包围在他们身边）。我对PHP非常体面。

我有一个提供颜色选项的表单（现在采用下拉格式，但将来会有图像点击）。表单中有多个选项，例如，您可以在一个选择菜单中选择一种框架颜色，然后在此图中的另一个选择菜单中选择一种顶部颜色。根据您所在的页面，最多可以有12个选项，全部命名为a，b，c，d ...到l。

我有一个由phpgd库创建的图像。这是php gd的当前设置：

    $a = $_POST['a'];//1
    $b = $_POST['b'];//2
    $c = $_POST['c'];//3
    $d = $_POST['d'];//4
    $e = $_POST['e'];//5
    $f = $_POST['f'];//6
    $g = $_POST['g'];//7
    $h = $_POST['h'];//8
    $i = $_POST['i'];//9
    $j = $_POST['j'];//10
    $k = $_POST['k'];//1
    $l = $_POST['l'];//12


    $default = imagecreatefrompng('../configurator-testing/11ta-503/default.png');
    $defaulta = imagecreatefrompng('../configurator-testing/11ta-503/black_a.png');
    $defaultb = imagecreatefrompng('../configurator-testing/11ta-503/black_b.png');

    header('Content-Type: image/png');

    $x = imagesx($default);
    $y = imagesy($default);

    imagecopy($default, $defaulta,0, 0, 0, 0, $x, $y);
    imagecopy($default, $defaultb, 0, 0, 0, 0, $x, $y);

    imagepng($default);

    imagedestroy($default);
    imagedestroy($defaulta);
    imagedestroy($defaultb);

现在，它只发布一个“默认”图片，它有一个黑框，黑色顶部。我想要它做的是采取表单输入，而不刷新页面或使用提交按钮，使用提交的值来更改创建的图像。文件名根据提交的值进行格式化（例如，提交的黑色将与文件black_a.php和black_b.php等相关联）。这是我正在测试的表格：

    <img src="config-gd.php"/>

    <form id="configform" name="configform">
    <label>Frame Color</label>
    <select name="a" id="a">
    <option value="black">black</option>
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
    </select> 
    <label>Top Color</label>
    <select name="b">
    <option value="black">black</option>
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
    </select>

请注意，它将我的图像（phpgd）文件放在表单上方的第一行，因此我希望通过我的phpgd脚本处理选项，并在表单上方的图像中抛出新的颜色选项。

我可以弄清楚如何让它在phpgd脚本中处理，没问题。我没有刷新和没有按钮部分的帖子有问题。有人知道一些jquery / ajax并愿意提供帮助吗？我一直在努力将网络上的教程放在一起，我有一段糟糕的时间。

我发现了一些简单的模型功能，这就是我想出来的，但我无法弄清楚如何最好地实现，到目前为止我的努力还没有结果：

    function postImg(layer1, layer2){   

       $.ajax({ 
          url: "config-gd.php", 
          data: { 
              id: layer1, 
              rate: layer2 
          }, 
          type: "POST", 
          success: function(){ 
             alert('Done!'); 
          } 
       }); 

    }

Answer 1

如果我是对的，你想要一个由php创建的图像加载一个没有重新加载页面的事件。我认为这很简单。

==================编辑的零件代码被替换======================== ==========

好吧，我看到你需要将表格数据发送到php，它对于Ajax来说是微不足道的，它也很容易创建图像，但对我来说似乎很困难的是如何将php发送的原始数据转换为真实图像JS。

所以我这里不包含ajax，但你仍然可以动态发送表单数据，当然没有重新加载并获得所需的图像，使用图像的src属性，检查这段代码，也许它可以是根据您的需求定制一些帮助。

<强> image.php

 if($_GET['color']=='red')
    {$red=223;  $green=32;   $blue=3;}
 else
    {$red=0;   $green=0;   $blue=0;}

$im = @imagecreate(110, 20)
    or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, $red, $green, $blue);
$text_color = imagecolorallocate($im, 233, 233, 231);
imagestring($im, 11, 5, 5,  $_GET['txt'], $text_color);
imagepng($im);
imagedestroy($im);
?>

<强>的index.htm

 <html>
<head>
<script type="text/javascript">

   function updateImage(color)
{   
    var txt = document.getElementById("myTxtId").value;
    document.getElementById("imgElement").src='image.php?txt='+txt+'&color='+color; 
}   

</script> 
</head>
<body > 

Write something here and I will get it back as an image created by php.<br>
<form >
<input type="text" name="txt" id="myTxtId">
<input type=submit value="Get it it black" onclick="updateImage('black');return false;" >
<input type=submit value="Get it it red" onclick="updateImage('red');return false;" >
</form>

 <img  src="" border=24  color=gold height="111" width="222" id="imgElement">   

</body>
</html>

将表单值发布到phpgd脚本而不刷新页面而没有按钮

1 个答案: