代码之家  ›  专栏  ›  技术社区  ›  Paul Karam

调用一个php页面来创建一个新的图像就是一次又一次地产生相同的图像

  •  0
  • Paul Karam  · 技术社区  · 6 年前

    把我看作jQuery/javascript中的noob。

    我有3个图像在一个页面。

    <img id="img1" src="img/create_image1.php"></img>
    <img id="img2" src="img/create_image2.php"></img>
    <img id="img3" src="img/create_image3.php"></img>
    

    下面是我的create\u imageX.php:

    <?php
        session_start();
        create_image();
        exit();
    
        function create_image()
        {
            $width = 150;
            $height = 150; 
            $image = ImageCreate($width, $height);  
            $num1 = rand(1,9);
            $num2 = rand(2,5);
            $name = 'images/test';
            $ni = $num1 . $num2 . '.gif';
            $src = imagecreatefromgif($ni);
    
            $_SESSION["img_X"] = $num1; //X is the same as the X from create_imageX.php
    
            $white = ImageColorAllocate($image, 255, 255, 255);
            $black = ImageColorAllocate($image, 0, 0, 0);
            $grey = ImageColorAllocate($image, 204, 204, 204);
            $darkgrey = ImageColorAllocate($image, 100, 100, 100);
    
            ImageFill($image, 0, 0, $black);    
    
            imagecopy($image, $src, rand(0,($width/2)-10), rand(0,($height/2)-20), 0, 0, 100, 100);
    
            //Code omitted of adding strings/drawings/numbers/w.e in mind for clarity
            header("Content-Type: image/jpeg"); 
            ImageJpeg($image);
            ImageDestroy($image);
        }
    ?>
    

    我还有一个输入,当文本更改时,我调用一个 CheckImage.php 检查写入的数字是否与第一个图像对应的页。返回“true”或“false”。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#inputId').on('input',function(e){
                $.ajax({
                  url: 'CheckImage.php?img='+$('#inputId').val(), 
                  success: function(data) {
                      if (data == "true") {
                            //do something
                      }
                      else {
                          //do something else
                      }
                  },
                  complete: function() {
                      $('#inputId').val("");
                      $('#img1').attr("src",$('#img2').attr("src"));
                      $('#img2').attr("src",$('#img3').attr("src"));
                      $('#img3').attr("src","img/create_image3.php");
                  }
                });
            });
        });
    </script>
    

    第一次之后,图像被正确交换。第一个图像正在交换到第二个图像。第二个正在和第三个交换。第三个正在生成一个新的。

    下一个问题是:

    • 第二次输入后,图像2和图像3将相同(没有为图像生成新图像(3)
    • 在第三次输入Image1之后,Image2和Image3都将是相同的(Image3不会再次生成,所以现在它们都具有相同的图像)。

    我该如何解决这个问题,每次生成Image3时,我都不会显示相同的三个图像?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Wolfgang Blessen    6 年前

    $('#img3').attr("src","img/create_image3.php?v="+random_number);