Javascript processing.js爲什麼圖像不顯示？

我想在canva上顯示圖像，我使用processing.js來完成它，但它不起作用。
該canva工作正常，但只有圖像不顯示。
這是我的代碼：Javascript processing.js爲什麼圖像不顯示？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Processing.JS inside Webpages: Template</title> 
    </head> 
    <body> 
     <p align="center"> 
      <canvas id="mycanvas"></canvas> 
     </p> 
    </body> 
    <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"> 
    </script> 
    <script> 
     var sketchProc = function(processingInstance) 
     { 
      with (processingInstance) 
      { 
     setup = function() 
     { 
        size(500, 400); 
        frameRate(30); 
     }; 
     draw = function() 
     { 
      background(255, 255, 255); 
      image(loadImage('file:///C:/Users/acer/Desktop/New%20folder%20(2)/a.jpg'), 200, 200); 
     }; 
      } 
     }; 

     var canvas = document.getElementById("mycanvas"); 
     var processingInstance = new Processing(canvas, sketchProc); 
    </script> 
</html>

誰能告訴我爲什麼？

來源

2017-03-18 Michael Liu

您必須啓動服務器，javascript無法訪問本地文件 –

請使用'''''代碼片段編輯器和來自http://lorempixel.com/的圖片創建一個[mcve] – mplungjan

首先，您不應該從draw()這樣的函數中調用loadImage()。這將導致您每秒載入圖像60次，這非常浪費。

您只能從setup()函數調用loadImage()一次，並確保您有一個預加載命令。

但是，您的問題是由於JavaScript無法訪問這樣的本地文件。 loadImage()函數需要一個URL：或者是一個完整的URL到一個圖像文件，或者一個相對URL指向與草圖相同目錄結構的圖像。這在The Processing.js reference解釋說：

注：某些瀏覽器將不會允許您從文件加載圖片：//的URI。建議您使用Web服務器進行開發和測試，以避免file：// URI發生任何問題。

還有一點需要注意：您需要養成檢查the JavaScript console的習慣。我願意打賭，那裏有錯誤會向你解釋所有這些。

來源

2017-03-18 15:31:16

Javascript processing.js爲什麼圖像不顯示？

回答

相關問題