Использование JavaScript для показа серой версии изображения при наведении курсора мыши. в firefox это возможно? - PullRequest
Новая
       0

Использование JavaScript для показа серой версии изображения при наведении курсора мыши. в firefox это возможно?

1 голос
/ 26 августа 2011 
<!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>

Ответы [ 3 ]

1 голос
/ 26 августа 2011

Обратите внимание, что вы также можете сделать это вообще без JavaScript, используя фильтры SVG и стиль: hover.

Редактировать: см. http://people.mozilla.org/~roc/filter.xhtml фильтр id="f2" и настроить матрицу по желанию.

1 голос
/ 26 августа 2011

Вам нужно 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>
1 голос
/ 26 августа 2011

Во-первых, это не сработает, потому что вы не определили контекст, поместите его в начало кода: 

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

Во-вторых, я не думаю, что вы должны указывать тип документа HTML4, когдаиспользуя HTML5.

И, в-третьих, вот отличное руководство по редактированию изображений с использованием canvas, одним из примеров является серое масштабирование изображения: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

Edit: Я кое-что забыл, вы хотите, чтобы ваш код запускался только после загрузки страницы, поэтому вам нужно поместить свой код в событие window.onload, например: 

window.onload = function () {
    //your code
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...