Search code examples
javascripthtmlpaperjs

How to apply paper.js to a simple html page?

I have tried several different method from paper.js, but I cannot even have a simple example run successfully on my computer. I want to know is there something wrong with my configuration or understanding?

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

This example is from here and here. I want to build a simple eye-drop color picker by having a magnifier effect.

But after I followed the documentation what I got is something like this

enter image description here

And the color in my magnifier (white circle) won't change. I am not familiar with this library but I have spent more than 5 hours to figure it out.

Any help is appreciate.

Solution

  • In my browser (Chrome 55), I am getting the following error:

    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)

    This is a cross-domain scripting error that arises from loading an image from the local filesystem. The paper.js documentation actually warns about this issue:

    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.

    I loaded the same HTML file into a local MAMP server (probably overkill, but it's what I had immediately available) and the script example works perfectly.

    As an aside, you can actually eliminate the duplicate image completely by loading the image file directly into the Raster object:

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