간단한 html 페이지에 paper.js를 적용하는 방법은 무엇입니까?

paper.js에서 여러 가지 방법을 시도했지만 간단한 예제가 내 컴퓨터에서 성공적으로 실행되지 않습니다. 내 구성이나 이해에 문제가 있는지 알고 싶습니까?간단한 html 페이지에 paper.js를 적용하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <canvas id="myCanvas" resize></canvas> 
    <img id="mona" src="bastion.png"> 
    <!-- Load the Paper.js library --> 
    <script type="text/javascript" src="paper-full.js"></script> 
    <!-- Define inlined PaperScript associate it with myCanvas --> 
    <script type="text/paperscript" canvas="myCanvas"> 
     // Create a raster item using the image tag with id='mona' 
     var raster = new Raster('mona'); 

     // Move the raster to the center of the view 
     raster.position = view.center; 

     // Create a circle shaped path at {x: 50, y: 50} 
     // with a radius of 30: 
     var path = new Path.Circle({ 
     center: [50, 50], 
     radius: 30, 
     strokeColor: 'white' 
     }); 

     function onMouseMove(event) { 
     // Set the fill color of the path to the average color 
     // of the raster at the position of the mouse: 
     path.fillColor = raster.getAverageColor(event.point); 
     } 
    </script> 
</body> 
</html>

이 예는 here 및 here에서입니다. 돋보기 효과를 사용하여 간단한 눈동자 색상 선택 도구를 만들고 싶습니다. 내가 무엇을 가지고 문서를 따라 후

는 그러나 변경되지 않습니다 내 돋보기 (흰색 원)이

그리고 색상 같은 것입니다. 나는이 도서관에 익숙하지 않지만 그것을 알아 내기 위해 5 시간 이상을 보냈다.

도움이 되시길 바랍니다. 브라우저 (크롬 55)에서

출처

2017-01-13 Kulbear

, 나는 다음과 같은 오류가 점점 오전 :

paper-full.js:5207 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 
at Raster.getAverageColor (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:5207:20) 
at Tool.onMouseMove [as _onMouseMove] (<anonymous>:20:33) 
at Tool.emit (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:652:20) 
at emit (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12848:19) 
at Tool._handleMouseEvent (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12861:5) 
at CanvasView._handleMouseEvent (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12314:19) 
at handleMouseMove (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12065:8) 
at HTMLDocument.docEvents.(anonymous function) (file:///Users/jordandalton/Development/paperjs/dist/paper-full.js:12135:4)

이 로컬 파일 시스템에서 이미지를로드에서 발생 크로스 도메인 스크립팅 오류입니다.

Please note: Images need to already be loaded when they are added to a Paper.js project. Working with local images or images hosted on other websites may throw security exceptions on certain browsers.

내가 로컬 MAMP 서버에 동일한 HTML 파일을로드 (과잉 아마,하지만 나는 즉시 사용할 수 있었다 기능) 및 스크립트 예제는 완벽하게 작동합니다 : The paper.js documentation 실제로이 문제에 대해 경고합니다. 나는이 문제를 발견했습니다하지만, 내가 시도해야합니다

var raster = new Raster('bastion.png');

출처

2017-01-13 17:51:39

및 시도 :

여담으로

, 당신은 실제로 래스터 오브젝트에 직접 이미지 파일을로드하여 중복 된 이미지를 완전히 제거 할 수 있습니다 Firefox와 Safari를 사용하지 마십시오. – Kulbear

전자 응용 프로그램을 만들 때부터 로컬 환경에서 실행해야합니다. 하지만 먼저 어쨌든 방법을 시도해 볼께 고마워! – Kulbear

[homepage] (http://electron.atom.io/)에서 Quick Start Electron 앱을 설치하고 패키지 된 HTML 페이지 본문에 코드를 놓았습니다. npm을 사용하여 종이를 설치하고 파일 경로를 스크립트에 맞게 조정하면 모든 것이 완벽하게 작동합니다. –

간단한 html 페이지에 paper.js를 적용하는 방법은 무엇입니까?

답변

관련 문제