Инвертировать цвет на все изображения на странице

Question

Я нашел несколько букмарктов, которые invert all the colors on a page или просто текст, но не тот, который инвертирует только изображения. Как я могу это сделать? Javascript не мой опыт.

Answer 1

Вы должны получить изображения в массиве и заменить тезисы на холст.

Код непроверенных (нб: исходное изображение должно быть на том же домене, из-за ограничений по безопасности):

function replaceImageByCanvas(image) { 
    var canvas = document.createElement('canvas'); 
    image.after(canvas); 
    var context = canvas.getContext('2d'); 
    canvas.width = image.width(); 
    canvas.height = image.height(); 

    var image_obj = new Image(); 
     var newImage = context.createImageData(canvas.width, canvas.height); 
     var arr = context.getImageData(0, 0, canvas.width, canvas.height); 
     var pixels = arr.data; 

     for(var i = 0; i < pixels.length; i+=4){ 
      var r = 255 - pixels[i]; 
      var g = 255 - pixels[i + 1]; 
      var b = 255 - pixels[i + 2]; 
      var a = pixels[i + 3]; 
      newImage.data[i] = r; 
      newImage.data[i + 1] = g; 
      newImage.data[i + 2] = b; 
      newImage.data[i + 3] = a; 
     } 

     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.putImageData(newImage, 0, 0); 
    image_obj.src = image.attr('src'); 
    image.remove(); 
}; 

$('img').each(function(index, element) { 
    $(this).one('load', function() { 
    replaceImageByCanvas($(element));| 
    }); 
});