Javascript processing.js 왜 이미지가 나타나지 않습니까?

캔바에 이미지를 표시하고 싶습니다. 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

서버를 시작해야합니다. 자바 스크립트는 로컬 파일에 액세스 할 수 없습니다. –

'<>'스 니펫 편집기와 http://lorempixel.com/의 이미지를 사용하여 [mcve]를 만드십시오. – mplungjan

먼저 draw() 함수에서 loadImage()으로 전화하면 안됩니다. 그렇게하면 초당 60 번 이미지를로드하게되므로 매우 낭비됩니다.

에서만 setup() 함수에서 번 loadImage()를 호출하고 당신이 프리로드 명령이 있는지 확인해야합니다.

하지만 문제는 JavaScript가 로컬 파일에 액세스 할 수 없기 때문입니다. loadImage() 함수에는 URL이 필요합니다. 이미지 파일의 전체 URL이거나 스케치와 같은 디렉토리 구조의 이미지를 가리키는 상대 URL입니다. 이 The Processing.js reference에 설명되어 있습니다 :

참고 : // URI를 : 일부 브라우저의 경우, 사용자가 파일에서 이미지를로드 할 수 없습니다. file : // URI에 문제가 발생하지 않도록 개발 및 테스트 할 때 웹 서버를 사용하는 것이 좋습니다.

자세한 내용은 the JavaScript console을 확인하는 습관이 필요합니다. 나는 당신에게이 모든 것을 설명했을지도 모를 오류가 있다는 것을 기꺼이 내기를 원할 것입니다.

출처

2017-03-18 15:31:16

Javascript processing.js 왜 이미지가 나타나지 않습니까?

답변

관련 문제