javascript - ページ上のすべての画像の色を反転する

Question

ページ上のすべての色またはテキストのみを反転するブックマークレットをいくつか見つけましたが、画像だけを反転するブックマークレットは見つかりませんでした。どうすればこれを行うことができますか？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));|
  });
});