При вызове php-страницы для создания нового изображения снова и снова создается одно и то же изображение.

Question

Считай меня нубом в jQuery / javascript.

У меня 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>

Я создаю изображение из файла и добавляю несколько строк /цифры / рисунки вокруг него.Изображения представляют цифры от 1 до 9.

Мой create_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 страница, которая проверяет, соответствует ли написанная цифра первому изображению.Возвращает «истина» или «ложь».

Далее я пытаюсь поменять image2 на image1 и image3 на image2 и создать изображение3 с нуля.Я использую этот код:

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

После первого раза изображения правильно меняются местами.Первое изображение заменяется на второе изображение.Второй обменивается с третьим.Третий генерируется для нового.

Проблема заключается в следующем:

• После второго ввода Image2 и Image3 будут одинаковыми.(нет нового изображения, сгенерированного для Image3)
• После третьего ввода Image1, Image2 и Image3 все будут одинаковыми.(Image3 не генерируется снова, поэтому теперь у них у всех одно и то же изображение.)три одинаковых изображения показаны?

Answer 1

Попробуйте установить другой параметр GET при вызове изображения, чтобы оно не загружалось из браузера или кэша сервера:

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