Question

<!DOCTYPE html>
<html>
 <head>
  <title> New Document </title>
<script type="text/javascript">
window.onload = function ()  {
  var area = document.getElementById('area');
  alert('area:'+area);   
  var context = area.getContext('2d');
  alert('context:'+context);
  if (context) {
    var imgd = context.getImageData(0, 0, 500, 300);
    var pix = imgd.data;
    for (var i = 0, n = pix.length; i < n; i += 4) {
      var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
      pix[i]   = grayscale;   // red
      pix[i+1] = grayscale;   // green
      pix[i+2] = grayscale;   // blue
    }
    context.putImageData(imgd, 0, 0);
  }
};
</script>
 </head>
  <body>
   <canvas id="area" width="500" height="300">
     <img id="canvasSource" src="http://www.treehugger.com/elephant-national-heritage-animal-india.jpg" alt="Canvas Source" />
   </canvas>
</body>
</html>

Answer 1

首先，这不起作用，因为你没有定义上下文，把它放在代码的开头：

var context = document.getElementById('area').getContext('2D');

其次，我认为在使用HTML5时不应该使用HTML4文档类型。

第三，这是一个使用画布编辑图像的好教程，其中一个示例是灰度缩放图像：http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

编辑：我忘记了一些内容，您希望代码只在页面加载后运行，因此您需要将代码放入window.onload事件中，如下所示：

window.onload = function () {
    //your code
};

Answer 2

请注意，您也可以在没有任何JavaScript的情况下使用SVG过滤器和a：悬停样式执行此操作。

修改：请参阅http://people.mozilla.org/~roc/filter.xhtml id="f2"过滤器并根据需要调整矩阵。

Answer 3

你需要小写2d，并在head标签内移动脚本

area.getContext（ '2D'）;

这是一些可能更好的代码：http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

这是我的测试html - 我还没有看到图像

<!DOCTYPE html>
<html>
 <head>
  <title> New Document </title>
<script type="text/javascript">
window.onload = function ()  {
  var area = document.getElementById('area');
  alert('area:'+area);   
  var context = area.getContext('2d');
  alert('context:'+context)
  if (context) {
    var imgd = context.getImageData(0, 0, 500, 300);
    var pix = imgd.data;
    for (var i = 0, n = pix.length; i < n; i += 4) {
      var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
      pix[i]   = grayscale;   // red
      pix[i+1] = grayscale;   // green
      pix[i+2] = grayscale;   // blue
    }
    context.putImageData(imgd, 0, 0);
  }
};
</script>
 </head>
  <body>
   <canvas id="area" width="500" height="300">
     <img id="canvasSource" src="http://www.treehugger.com/elephant-national-heritage-animal-india.jpg" alt="Canvas Source" />
   </canvas>
</body>
</html>

使用javascript在鼠标悬停时显示图像的灰度版本。在Firefox中它可能吗？

3 个答案: