在 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 让我们一起玩。

我认为问题在于，出于某种原因，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-only 语法的相同代码。这行不通。

但退一步说：如果您习惯使用 JavaScript，那么为什么要使用 Processing.js？ Processing.js 专为希望编写自动转换为 JavaScript 的 Java 语法的 Processing (Java) 开发人员而设计。此时 Processing.js 已经很老了，不再维护。

相反，我建议使用 P5.js。 P5.js 允许您编写 Java 脚本语法来创建网络优先处理草图。 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。

在 JavaScript 中使用 Processing 的 loadImage

Using Processing's loadImage in JavaScript

javascript

processing

processing.js

loadimage