Using Processing's loadImage in JavaScript

烈酒焚心 提交于 2020-01-05 07:41:49

问题


I am using the Processing API to draw an image to my HTML canvas, which I can use later in the code. The JavaScript code that I have is:

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);

The console says that the image has dimensions 0x0. I tried loading with Processing's directives, but I am still getting an image dimensions of 0x0. However, when I call loadImage() inside the draw loop, the program recognizes the image's dimensions of 512x512.

I do not want to continuously call loadImage() inside the draw loop. What should I do to make sure that the image loads properly outside the draw loop?

You can find a minimal working example here.


回答1:


First off, thanks for posting an MCVE for us to play with.

I believe the problem is that, for some reason, the preload directive, and maybe the loadImage() function itself, doesn't work when you're writing JavaScript-only Processing.js code. I've tested this in various editors and versions of Processing.js.

So it appears that to use the loadImage() function, you should use pure Processing code. Here is a CodePen that shows how you'd do that:

<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>

Just for comparison, here is the same code using JavaScript-only syntax. This doesn't work.

But taking a step back: if you're comfortable using JavaScript, then why are you using Processing.js? Processing.js is designed for Processing (Java) developers who want to write Java syntax that's automagically converted to JavaScript. At this point Processing.js is pretty old and no longer maintained.

Instead, I'd recommend using P5.js. P5.js allows you to write JavaScript syntax to create web-first Processing sketches. P5.js is much newer and is still being actively developed.

Here is the same code in 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);
}

Shameless self-promotion: I wrote a tutorial on the differences between Processing, Processing.js, and P5.js available here.



来源:https://stackoverflow.com/questions/47945514/using-processings-loadimage-in-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!