Javascript 您好，有人可以帮助html5灰度转换代码吗？_Javascript_Html_Html5 Canvas

Javascript 您好，有人可以帮助html5灰度转换代码吗？

javascript html html5-canvas

Javascript 您好，有人可以帮助html5灰度转换代码吗？,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我在这里找不到虫子。我不知道我在哪里遗漏了一些东西，这些东西不能让我的代码将图像转换为灰度。如果有人能尝试这段代码并帮助我解决问题，这将是很有帮助的 <!doctype html> <html> <head> <title>Canvas API</title> </head> <body> <!-- In order to have canvas we need to use t

我在这里找不到虫子。我不知道我在哪里遗漏了一些东西，这些东西不能让我的代码将图像转换为灰度。如果有人能尝试这段代码并帮助我解决问题，这将是很有帮助的

<!doctype html>
<html>
  <head>
    <title>Canvas API</title>
  </head>
  <body>
    <!-- In order to have canvas we need to use the canvas tag  -->
    <canvas id="c" width="500" height="500"></canvas>
    <!-- To use canvas we need to access is from javascript code -->
    <script>
      var c = document.querySelector("#c"); // grab a canvas with id="c"
      var ctx = c.getContext("2d"); // context in which we are using it

      var img = new Image();
      img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';

      img.onload = function() {
        ctx.drawImage(img, 0, 0);
        img.style.display = 'none';
      };

      var myData = ctx.getImageData(0,0, 500, 500);
      console.log(myData);



      var grayscale = function(imageData) {
        var numPixels = imageData.data.length;
        for (var i = 0; i < numPixels; i+=4) {
          var avg = 0.34 * imageData.data[i] + 0.5 * imageData.data[i + 1] + 0.16 * imageData.data[i + 2];
          imageData.data[i*4+0] = avg;
          imageData.data[i*4+1] = avg;
          imageData.data[i*4+2] = avg;
          // imageData.data[i*4+3] = 255;
        }
        ctx.putImageData(imageData, 0, 0);
      };

      grayscale(myData);

    </script>
  </body>
</html>


画布API
var c=document.querySelector（#c”）；//用id=“c”抓取画布
var ctx=c.getContext（“2d”）；//我们使用它的上下文
var img=新图像（）；
img.src=https://mdn.mozillademos.org/files/5397/rhino.jpg';
img.onload=函数（）{
ctx.drawImage（img，0,0）；
img.style.display='none'；
};
var myData=ctx.getImageData（0,0500500）；
console.log（myData）；
var灰度=函数（图像数据）{
var numPixels=imageData.data.length；
对于（变量i=0；i

您的代码中不只是一个bug。我们已经找到了4个：

在设置

.src

属性之前，需要设置

.onload

处理程序。如果图像已在浏览器缓存中，则在设置.src属性时加载图像。在映像已加载时设置onload处理程序不会产生任何效果

您正在获取imagedata并调用

greyscale（）

-函数，而不检查

.onload

处理程序是否已执行，因此当图像未缓存时，可能会在onload处理程序将图像绘制到画布之前执行greyscale函数。如果要确保在绘制图像后执行灰度转换代码，请将该代码移动到

ctx.drawImage（img，0，0）之后的onload处理程序中


在greyscale
功能中，当设置imageData.data
时，将i
与4相乘，但在读取数据时不会。这意味着你写的不是你读的像素。您已经在for循环中将i
增加了4，因此不需要乘法
您正在从远程域（mdn.mozillademos.org
）加载映像。当您将远程图像绘制到画布时，画布会“被跨源数据污染”，并且出于安全原因，某些功能（如getImageData
）会被禁用。将映像复制到脚本所在的同一域。（谢谢，@NiettheDarkAbsol）
顺便说一下：newimage（）
不会显示在任何位置，除非您将新创建的图像节点插入到网站文档的DOM树中。您的代码中没有这样做。所以img.style.display='none'
完全没有必要。
您是否调试了代码以找出问题的具体位置？在您尝试修改画布、移动数据获取和灰度缩放到load Callback之前，图像可能尚未加载。您缺少最大的问题：加载远程图像会污染画布，您不能在受污染的画布上调用getImageData
。@NiettheDarkAbsol谢谢，我添加了这个。谢谢Phillipp，它真的很有用，我终于可以让它工作了。@varun当我能够帮助您时，请单击旁边的复选标记图标接受这个答案。