Javascript processing.js Warum erscheint das Bild nicht?

Ich möchte ein Bild auf der Canva zeigen, ich benutze processing.js, um es zu tun, aber es funktioniert nicht.
Die Canva funktioniert gut, aber nur das Bild wird nicht angezeigt.
dies ist mein Code:Javascript processing.js Warum erscheint das Bild nicht?

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

Kann mir jemand sagen, warum?

Quelle

2017-03-18 Michael Liu

Sie müssen einen Server starten, Javascript kann nicht auf lokale Dateien zugreifen –

Bitte erstellen Sie eine [mcve] mit dem '<>' Snippet-Editor und ein Bild von http://lorempixel.com/ – mplungjan

Zuerst sollten Sie loadImage() von der draw() Funktion so nicht aufrufen. Dadurch werden Sie das Bild 60 Mal pro Sekunde laden, was sehr verschwenderisch ist.

Sie sollten nur loadImage()einmal von der Funktion setup() aufrufen und sicherstellen, dass Sie einen Preload-Befehl haben.

Aber Ihr Problem wird durch die Tatsache verursacht, dass JavaScript nicht auf lokale Dateien wie diese zugreifen kann. Die Funktion loadImage() benötigt eine URL: entweder eine vollständige URL zu einer Bilddatei oder eine relative URL, die auf ein Bild in derselben Verzeichnisstruktur wie die Skizze zeigt. Dies erklärt sich in The Processing.js reference:

HINWEIS: Einige browers werden Sie Bilder nicht zulassen, laden von file: // URIs. Es wird empfohlen, einen Webserver für Ihre Entwicklung und Tests zu verwenden, um Probleme mit Datei: // URIs zu vermeiden.

Noch ein Hinweis: Sie müssen sich angewöhnen, the JavaScript console zu überprüfen. Ich würde wetten, dass da Fehler auftauchen, die dir das alles erklärt hätten.

Quelle

2017-03-18 15:31:16

Javascript processing.js Warum erscheint das Bild nicht?

Antwort

Verwandte Themen