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

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

image html jquery php

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

Wolfgang Blessen 6 年前

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