在JavaScript中使用Processing的loadImage

Question

我正在使用Processing API在我的HTML canvas上绘制一个图像，稍后我可以在代码中使用它。我拥有的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。我尝试用Processing's directives加载，但仍然得到0x0的图像尺寸。但是，当我在绘图循环中调用loadImage()时，程序识别出图像的尺寸为512x512。

我不想在绘图循环中不断调用loadImage()。我应该怎么做才能确保图像正确地加载到绘图循环之外？

您可以找到一个最小的工作示例here。

Answer 1

首先，感谢你给我们贴了一个MCVE供我们玩。

我认为问题在于，由于某些原因，当您编写JavaScript-only Processing.js code时，preload指令，也许还有loadImage()函数本身，都无法工作。我已经在不同的编辑器和Processing.js版本中对此进行了测试。

因此，要使用loadImage()函数，您应该使用pure Processing code。Here是一个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>

为了便于比较，here是使用纯JavaScript语法的相同代码。这不管用。

但是后退一步:如果你习惯于使用JavaScript，那么为什么还要使用Processing.js呢？Processing.js是为希望编写自动转换为JavaScript的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、Processing.js和P5.js available here之间的区别的教程。