Как показать изображение в processing.js из PHP с помощью JQuery

Question

Привет, я пытаюсь отобразить изображение в эскизе processing.js с использованием jQuery ajax-запроса и php-кода, но он не отображает изображение, которое я отправляю на эскиз, вот мой JS код:

<script type="text/javascript"> 
    function send() { 
     //var s; 
     function setPath(imgPath) { 
      var s = imgPath; 
      var processingInstance; 
      processingInstance = Processing.getInstanceById('canvas'); 
      processingInstance.change(s); 
     } 
     var variable = 5; 
     $.ajax({ 
      method: "POST", 
      tupe: "POST", 
      url: "take.php", 
      data: ({val: variable}), 
      success: function (data) { 
       setPath(data); 
      }, 

     }); 


    } 
</script> 

Это мой код обработки:

String pic; 
PImage img; 

void setup(){ 
    size(200,200); 
    background(150); 
    img = loadImage(pic); 
} 

void draw(){ 

    image(img,50,50,width/2,height/2); 
} 
void change(String val){ 
    pic = val; 
    println(pic); 

} 

И мой PHP код:

<?php 

if ($_POST) { 
    $temp = $_POST['val']; 
    if ($temp == 5) { 
     $img = "images.jpg"; 
     echo $img; 
    } 
} 
?> 

, когда я запускаю код и печатаю результат в эскизе, я получаю результат «images.jpg», но ничего не отображается на холсте, кто-то знает, что делать?

Answer 1

Помните, что функция setup() вызывается только один раз, в начале эскиза.

Ваша pic переменная начинается без значения, и именно это вы переходите в функцию loadImage(). Вы сохраняете возвращаемое значение (которое, вероятно, будет сломанным изображением) в вашу переменную img.

Затем в функции change() вы обновляете переменную pic, но вы не обновляете переменную img. Просто потому, что вы меняете переменную pic, это не означает, что изображение будет перезагружено для вас. Вы должны сделать это самостоятельно.

Это может выглядеть примерно так:

void change(String val){ 
    pic = val; 
    img = loadImage(pic); 
} 

На самом деле вы, вероятно, могли бы избавиться от переменной pic полностью.

Обратите внимание, что для этого также требуется файл изображения, расположенный по указанному пути.