Как сделать цветной PNG-файл в оттенках серого?

Question

Можно создать дубликат:
Convert an image to grayscale in HTML/CSS

Я хочу взять цветную .png изображение на странице загрузки и превращает его в оттенках серого, а затем, когда вы наведите курсор мыши на изображение, он возвращается к цвет, а при выводе мыши на серый. Я пробовал по меньшей мере 10 различных учебников по этому вопросу, но никто из них не работал. Элемент, который мне нужно изменить от цвета к серому, назад к цвету и к серому, - это .photo. http://jamestestblog3.tumblr.com/ - это мой сайт для тестирования.

Как я могу это сделать?

Answer 1

Как уже упоминалось, проблема с перекрестным доменом является проблемой. К сожалению, tumblr использует другой домен для изображений, чем тот, на котором размещен ваш блог. Я использовал сторонний сайт конверсии в демо ниже (http://www.maxnov.com/getimagedata), чтобы получить данные изображения. Я пробовал эту же тему в моей теме tumblr (http://www.tumblr.com/theme/32199), но не использовал ее.

Демо: http://jsfiddle.net/ThinkingStiff/vXWvz/

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://thinkingstiff.com/scripts/get-image-data.js"></script> 

<img id="image" alt="" src="http://thinkingstiff.com/images/100x100.png" /> 

Сценарий:

function initializeImage(imageElement) { 

    $.getImageData({ 

     url: imageElement.src, 
     success: function(image) { 

      if(!imageElement.dataset.color) { 

       var canvas = document.createElement('canvas'), 
        context = canvas.getContext('2d'), 
        width = image.width, 
        height = image.height; 

       canvas.width = width; 
       canvas.height = height; 
       context.drawImage(image, 0, 0); 

       var pixels = context.getImageData(0, 0, width, height); 

       for(var y = 0; y < pixels.height; y++) { 

        for(var x = 0; x < pixels.width; x++) { 

          var i = (y * 4) * pixels.width + x * 4; 
          var avg = ( 
           pixels.data[i] 
           + pixels.data[i + 1] 
           + pixels.data[i + 2] 
         )/3; 
          pixels.data[i] = avg; 
          pixels.data[i + 1] = avg; 
          pixels.data[i + 2] = avg; 

        }; 

       }; 

       context.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); 
       imageElement.dataset.color = imageElement.src; 
       imageElement.dataset.gray = canvas.toDataURL(); 
       imageElement.src = canvas.toDataURL(); 

      }; 

     } 

    }); 

}; 

var image = document.getElementById('image'); 

initializeImage(image); 

image.addEventListener('mouseover', function() { 

    this.src = this.dataset.color; 

}); 

image.addEventListener('mouseout', function() { 

    this.src = this.dataset.gray; 

});