페이지의 모든 이미지에 색상 반전

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));| 
    }); 
});