Question

我正在做一个关于HTML5画布的课程。我使用了一些教授的代码。那些在教程中工作，但是当我尝试时，图像根本没有变化。这是我的反色代码： -

＆＃13;

<!doctype html>
<html>
<body>
  <canvas width="1000" height="1000"></canvas>
  <script>
   var c =  document.querySelector("canvas");
   var ctx = c.getContext('2d');

function doIt() {
  var imageData = ctx.getImageData(0,0, 1000, 1000);
  var length = imageData.data.length / 4;
  for (var i = 0; i < length; i++){
      imageData.data[i * 4 + 0] = 255 - imageData.data[i * 4 + 0];   //Red
      imageData.data[i * 4 + 1] = 255 - imageData.data[i * 4 + 1];   //Green
      imageData.data[i * 4 + 2] = 255 - imageData.data[i * 4 + 2];   //Blue
  }
  // Comment this line to see original image
  ctx.putImageData(imageData, 0, 0);
}

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
  doIt();
}
image.src = 'rgb.png';
  </script>

</body>
</html>

＆＃13;

请帮助我在哪里出错

Answer 1

我非常确信您遇到的问题与正在加载的图片为tainting the canvas这一事实有关。

以下示例与您的代码相同，但事实如下：

从设置了Access-Control-Allow-Origin标头的服务器提供图像，以允许来自任何来源的请求
将image.crossOrigin设为anonymous

相比之下，您可以在http://so-answers.s3-website-us-east-1.amazonaws.com/rgb.png找到未经改动的图片。

var c =  document.querySelector("canvas");
var ctx = c.getContext('2d');

function doIt() {
  var imageData = ctx.getImageData(0,0, 1000, 1000);
  var length = imageData.data.length / 4;
  for (var i = 0; i < length; i++){
      imageData.data[i * 4 + 0] = 255 - imageData.data[i * 4 + 0];   //Red
      imageData.data[i * 4 + 1] = 255 - imageData.data[i * 4 + 1];   //Green
      imageData.data[i * 4 + 2] = 255 - imageData.data[i * 4 + 2];   //Blue
  }
  // Comment this line to see original image
  ctx.putImageData(imageData, 0, 0);
}

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
  doIt();
}
image.crossOrigin = "anonymous";
image.src = 'http://so-answers.s3-website-us-east-1.amazonaws.com/rgb.png';

<canvas width="1000" height="1000"></canvas>

修改

如果您在同一服务器上提供HTML，JavaScript文件和图像（也可能是同一个目录，但这不是先决条件），在开发中或在生产中，那么您将不会遇到任何跨源问题

对于本地开发，您可以使用Python，使用内置Web服务器，通过从命令行运行python -m SimpleHTTPServer 8000，在包含您的文件的目录中执行此操作。有关详细信息，请参阅http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/。

如果您提供的图片来自与HTML和JavaScript文件不同的域（在开发或生产中），那么您将遇到跨域问题。这可以通过我在上面的例子中做出的改变来解决。

此外，正如K3N在对您的问题的评论中所说，如果您只是将文件直接加载到浏览器中而不运行本地开发服务器，那么您也会遇到交叉问题。

HTML5画布中的图像处理无效

1 个答案: