在 JavaScript 中使用 Processing 的 loadImage

Question

我正在使用Processing 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。我尝试使用 Processing's directives 加载，但我仍然得到 0x0 的图像尺寸。但是，当我在绘图循环中调用loadImage() 时，程序会识别出图像的尺寸为 512x512。

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

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

Answer 1

首先，感谢您发布MCVE 供我们使用。

我认为问题在于，由于某种原因，preload 指令以及loadImage() 函数本身在您编写JavaScript-only Processing.js code 时不起作用。我已经在各种编辑器和 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 语法的处理 (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之间区别的教程here。