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

回答

相關問題