JavaScript 在 Firefox、Chrome 中不起作用 - 在 IE、Edge 中起作用答案

【问题标题】：JavaScript not working in Firefox, Chrome - works in IE, EdgeJavaScript 在 Firefox、Chrome 中不起作用 - 在 IE、Edge 中起作用
【发布时间】：2020-06-04 18:54:06
【问题描述】：

我制作了这个脚本，它将对图像进行过滤。但它似乎只适用于 Internet explore 和 Microsoft Edge。

有人可以指导我正确的方向，让它在 Google chrome 和 Firefox 中运行吗？

<html>
<style>
h1 { font-size:2rem; }
p { font-size:1rem; }
canvas { display:block; margin:15px; }
button { margin:15px; }
img { display:block;}
</style>
<script>
function filter() {

  //canvas settings 
    var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var img = document.getElementById("picture");

  //matches the image size to the canvas
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;

  //overfører billedet til canvas
  context.drawImage(img,0,0);

  //Loads data from the image   var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;

  //Runs all the pixel
  for (var i = 0; i < data.length; i += 4) {

    //fetch the RGB values from the pixels 
    var red = data[i];
    var green = data[i + 1];
    var blue = data[i + 2];
    // på pladsen i+3 sidder alpha (gennemsigtigheden)

    //FILTER START

        //puts the avarage for red green and blue 
        imageData.data[i] = Math.round(red*0.5);
        imageData.data[i+1] = Math.round(green*0.5);
        imageData.data[i+2] = Math.round(blue*0.5);

    }

  // overrides the original image on the canvas 
  context.putImageData(imageData, 0, 0);

}

</script>
<body>

  <div align="center">

      <h1>Use a filter</h1>

            <button onclick="filter()">Use filter</button>

      <img src="https://videnskab.dk/files/article_media/golden_gate_bridge.jpg" id='picture'>
       <canvas id="canvas"></div>

  </div>
</body>
</html>

【问题讨论】：

您好 Phillip，欢迎来到 Stackoverflow。尽管您告诉我们 Firefox/Chrome 存在问题，但您没有提供任何关于这些浏览器出现问题的说明。
查看how-to-ask 以改进您的问题，以便社区可以更好地帮助您
你好，斯彭德，谢谢。它加载图片，并通过过滤器。但新的过滤器适用于新图片。

标签： javascript html google-chrome canvas

【解决方案1】：

这是从文件系统运行网页引起的跨域问题。为了解决这个问题，请尝试从网络服务器运行页面，确保图像是从同一来源提供的，或者使用相关的 CORS 标头提供。没有这个，getImageData 将会失败。

通过网络服务器运行应该可以让您重新开始。我使用 https://fenixwebserver.com/ ，一个迷你桌面网络服务器，您可以指向本地文件夹并启动静态文件网络服务器。

【讨论】：

成功了。这很好也很简单，我可以在本地运行。谢谢你的帮助，你让我很开心:)