如何将 paper.js 应用于简单的 html 页面？

Question

我尝试了 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 and here。我想通过放大镜效果构建一个简单的滴眼液颜色选择器。

但是在我按照文档进行操作后，我得到的是这样的

我的放大镜（白色圆圈）中的颜色不会改变。我对这个库不熟悉，但是我花了5个多小时才弄明白。

感谢任何帮助。

Answer 1

在我的浏览器 (Chrome 55) 中，出现以下错误：

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)

这是一个 cross-domain 脚本错误，由从本地文件系统加载图像引起。 The paper.js documentation 实际上警告这个问题：

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.

我将相同的 HTML 文件加载到本地 MAMP 服务器（可能有点矫枉过正，但这是我立即可用的）并且脚本示例完美运行。

顺便说一句，您实际上可以通过将图像文件直接加载到光栅对象中来完全消除重复图像：

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

如何将 paper.js 应用于简单的 html 页面？

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

html

javascript

paperjs