0
我发现了几个小书签invert all the colors on a page或只是文本,但不是只反转图像的文字。我该如何去做这件事? Javascript不是我的专长。在页面上的所有图像上反转颜色
我发现了几个小书签invert all the colors on a page或只是文本,但不是只反转图像的文字。我该如何去做这件事? Javascript不是我的专长。在页面上的所有图像上反转颜色
您必须获取数组中的图像,并用画布替换这些图像。
代码未测试(NB:图像源必须在相同的域,由于安全限制):
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));|
});
});