利用处理的JavaScript中的LoadImage(Using Processing's

我使用的处理API将图像绘制到我的HTML画布，我可以稍后在代码中使用。 JavaScript代码，我有是：

var sketchProc = function(processingInstance) {
  with (processingInstance) {

    /* @pjs preload="images/hot-air.png" */

    size(innerWidth, innerHeight);
    var testImage = loadImage("images/hot-air.png");

    draw = function() {
      image(testImage, 0, 0, 500, 500);
    }
  }
}

var canvas = document.getElementById("canvas");
var processingInstance = new Processing(canvas, sketchProc);

控制台说，图像具有尺寸为0x0。我试图加载处理的指示，但我仍然得到为0x0的图像尺寸。然而，当我打电话loadImage()平局循环中，程序识别的512×512图像的尺寸。

我不想继续调用loadImage()平局循环中。我应该怎么做，以确保抽奖外循环加载图像正确吗？

你可以找到一个最小的工作示例这里。

首先，感谢张贴的MCVE我们一起玩。

我认为，问题是，由于某种原因，预载指令，也许loadImage()函数本身，当你写不工作的JavaScript只Processing.js代码。我在各种编辑和Processing.js版本测试了这个。

所以看来使用loadImage()函数，你应该使用纯处理代码。这里是一个CodePen，显示你会怎么做：

<script type="application/processing">
    /* @pjs preload="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; */
    PImage testImage;

    void setup(){
      size(500, 500);
      testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
      println(testImage.height);
    }

    void draw() {
      background(100);
      image(testImage, 0, 0, 250, 250);
    }
</script>
<canvas> </canvas>

只是为了比较，这里是使用JavaScript，仅语法相同的代码。这是行不通的。

但是退后一步：如果您使用JavaScript感到满意，那么你为什么要使用Processing.js？ Processing.js是专为谁想写多数民众赞成自动地转换为JavaScript的Java语法处理（Java）的开发人员。此时Processing.js是很老了，不再维持。

相反，我建议使用P5.js 。 P5.js让你编写JavaScript语法来创建Web的第一处理草图。 P5.js是非常新的，并仍在积极发展。

这里是P5.js相同的代码：

var testImage;

function preload(){
  testImage =  loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
}

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(100);
  image(testImage, 0, 0, 250, 250);
}

无耻的自我宣传：我写了一个教程处理，Processing.js和可用P5.js之间的差别在这里。