javascript 修复 MDN 示例中污染的画布

Question

运行良好，直到我开始像素操作，一个颜色选择器示例。

getImageData 给出：

MDNTutorialBaseppp.html:21 未捕获的 DOMException：无法在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨域数据污染。 在 HTMLCanvasElement.pick

这是我正在运行的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <canvas id="canvas" width="600" height="300"></canvas>
    <script>
      var img = new Image();
      //img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
      img.src = 'photo2.jpg';
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
        img.style.display = 'none';
      };
      var color = document.getElementById('color');
      function pick(event) {
        var x = event.layerX;
        var y = event.layerY;
        var pixel = ctx.getImageData(x, y, 1, 1);
        var data = pixel.data;
        var rgba = 'rgba(' + data[0] + ', ' + data[1] +
            ', ' + data[2] + ', ' + (data[3] / 255) + ')';
        color.style.background =  rgba;
        color.textContent = rgba;
      }
      canvas.addEventListener('mousemove', pick);
    </script>
  </body>
</html>

已经打了几个小时了。

任何人都可以发现我的方式的错误。

Answer 1

关于这个问题的评论提供了一种方法来解决所提出的特定案例的这个问题。 您需要运行一个本地服务器，这很容易做到。 根本问题是一个复杂的话题，我并不假装完全理解。

javascript 修复 MDN 示例中污染的画布

问题描述

1 个解决方案

解决方案1
0 2020-03-28 10:13:57

javascript 修复 MDN 示例中污染的画布

问题描述

1 个解决方案

解决方案1 0 2020-03-28 10:13:57

解决方案1
0 2020-03-28 10:13:57