processing.js loadImage（）

我已经做了一个processing.js网页，我正在使用一个平台游戏，所以我已经得到了代码已经计划出。现在我只需要把它放在网页上。现在我可以将背景变成红色，但是当我将代码放入时，我意识到它不会绘制任何图像。我查了一下，process.js使用的图像方法与我所做的完全不同。它仍然无法工作。processing.js loadImage（）

这里是我的processing.js文件HelloWeb.pde内部代码：

preload = 
"file:///E:/Extra%20Curricular/STEM%20Videogame/Art/BlackKingIdle.png";

//注意，E盘是我的USB。我不知道它是否会起作用？

//AI Codes 
    int wolfX = 310; 
    int wolfY = 200; 
    int wolfHealth = 50; 

    //Health 
    int kingHealth = 100; 
    int dragon = 500; 

    //LV design 
    int floorHeight = 300; 
    int lvlNum = 1; 

    //movement (x) 
    int maxSpeed = 6.25; 
    int xForce = 0; 
    int kingXPos = 947.5; 

    //movement (y) 
    int kingYPos = floorHeight + 50; 
    int yForce = -15; 
    int jumping = false; 


    void setup() { 
     size(1895, 800); 
     background(255, 0, 0); 
    } 

    void draw() { 
     if (lvlNum != 0) { 
     PImage kingIdle = loadImage("file:///E:/Extra%20Curricular/STEM%20Videogame/Art/BlackKingIdle.png") 
     } 
    };

和HTML：

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Hello Web - Processing.js Test</title> 
     <script src="processing.min.js"></script> 
    </head> 
    <body> 
     <h1>Processing.js Test</h1> 
     <p>This is my first Processing.js web-based sketch:</p> 
    <canvas data-processing-sources="HelloWeb.pde" width="1895" height="800" style="border:4px solid"></canvas> 
</body> 
</html>

来源

2016-08-02 Marco

你应该进入一个张贴的MCVE的习惯。尝试将问题缩小到尽可能少的行数。例如这个代码演示您的问题：

/* @pjs preload="C:\\Users\\Kevin\\Desktop\\August 1, 2016\\cropped\\Sky4.JPG"; */ 
PImage myImage; 

void setup(){ 
    size(200,200); 
    myImage = loadImage("C:\\Users\\Kevin\\Desktop\\August 1, 2016\\cropped\\Sky4.JPG"); 
} 

void draw(){ 
    image(myImage, 50,50, 100,100); 
}

你也应该进入检查出你的JavaScript控制台的习惯。你会看到你遇到的任何错误。如果你看那里，你应该看到一个错误，说"(index):1 Not allowed to load local resource"。

而这个错误说明了一切。即使您在本地运行该网页，也不允许从网页访问本地文件。

您的Processing.js网页由本地网络服务器提供。 Processing为你处理这个问题，这很好，但是webserver只能触摸你已经导入到sketch目录的文件。通过处理编辑器中的草图菜单执行此操作，或者您可以手动将data文件夹添加到草图目录，然后将图像放在那里。然后，只需参考相对于草图的图像。在我的示例代码

两条线会改变：

/* @pjs preload="Sky4.JPG"; */ 
myImage = loadImage("Sky4.JPG");

如果你不想把你的图片在你的素描目录，那么你将不得不使用自己的网络服务器。您可以在本地运行一个，或者您可以将图像上传到图像主机，并在您的代码中使用该网址。

来源

2016-08-02 22:42:30

谢谢！这工作正常。 – Marco

@Marco没问题。请注意，您可以接受（并upvote）帮助您的答案。看看你的问题历史，看起来你没有接受任何答案。 –

processing.js loadImage（）

回答

相关问题