Question

我是p5js的初学者，我正在学习如何上传图片。这是我的代码：

PImage img;

function setup() {
  size(1400, 1400)
  img = loadImage("india-map.gif");
}


function draw() {
  background(0)
  image(img, 100, 100);
}

当我运行它时，它表示第1行存在问题。错误消息显示为：

SyntaxError：预期；但找到了img。

我不知道这意味着什么，我应该做什么。谁能帮我吗？

编辑：

我将代码更改为

var image1;


function preload(){
 image1= loadImage("india-map.jpg");
}

function setup(){
  
 creatCanvas(1350,600) 
}

function draw(){
image(image1, 100, 100); 
  
}

我的页面仅显示...正在加载而未加载任何图像。

Answer 1

说明：

PImage是来自Processing3库的一种类型。

在javascript中，声明变量时，请使用const，let或var。

此外，size方法也来自Processing3。而是使用createCanvas方法并将大小作为参数传递。

遍历documentation并确保要使用的方法存在。

解决方案：

let img;
function setup() {
  createCanvas(100, 50);
  img = loadImage("india-map.gif");
}


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

Answer 2

除了kemicofa很好的答案外，我认为注意loadImage是异步的也很重要。这意味着当我们调用loadImage时，该方法将需要一些时间来检索图像数据并将其加载到内存中。因此，loadImage不会像其余代码一样立即发生。

因此，在加载映像时，其余代码仍可以运行，包括draw方法。这意味着，如果您的draw方法仅运行一次（您可以使用noLoop()使其仅运行一次，则由于尚未加载图片，因此不会显示图片。

针对此问题，有两种解决方案，例如使用回调。但是，p5js提供了另一种在setup之前运行的方法，称为preload。在此功能中，您可以加载图像以确保setup和draw可以使用。

使用所有这些想法，您将得到类似于以下内容的代码：

let img;

function preload() {
  img = loadImage('india-map.gif'); // load media and other data
}

function setup() { // only executed once preload is has finished loading data
  createCanvas(400, 400);

}

function draw() { // only executed once preload is has finished loading data
  image(img, 0, 0, width, height);
  noLoop(); // stop draw from looping (to show img has been loaded)
}

您可以找到一个有效的示例here

将图像上传到Canvas p5js

2 个答案:

说明：

解决方案：