如何在 processing.js 中显示来自 PHP 和 Jquery 的图像

Question

嗨，我正在尝试使用 jquery ajax 请求和 php 代码在 processing.js sketch 中显示图像，但它没有显示我发送到 sketch 的图像这是我的 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" 的结果，但是 canvas 中没有任何显示有人知道该怎么做吗？

Answer 1

请记住，setup() 函数仅在草图开始时调用一次。

您的 pic 变量开始时没有任何值，这就是您传递给 loadImage() 函数的内容。您将返回的值（可能是损坏的图像）存储到您的 img 变量中。

然后在 change() 函数中，更新 pic 变量，但不更新 img 变量。仅仅因为您更改了 pic 变量并不意味着图像会神奇地为您重新加载。你必须自己专门做。

它可能看起来像这样：

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

事实上，您可以完全摆脱 pic 变量。

请注意，这还需要位于指定路径的图像文件。

如何在 processing.js 中显示来自 PHP 和 Jquery 的图像

how to display image in processing.js from PHP with Jquery

javascript

php

jquery

processing.js