Gebruik geen grote afbeelding (in Kb.) om te inverteren. Dat kost te veel cpu-tijd, en bij heel grote afbeeldingen kom je in de problemen. Kleine plaatjes (zoals in dit voorbeeld) werken razendsnel en probleemloos. Plaats eerst de container voor het plaatje op het scherm met de hieronderstaande "div's".
<div id="invert_explorer"><canvas id="invert_canvas"></canvas></div>
Plaats vervolgens het onderstaande javascript zo laag als mogelijk in de body-sectie van jouw pagina en vul bij de variabele invert_plaatje de naam van een (plaatjes-)file in. Het script is foutloos volgens JSLint en de pagina valideert op alle mogelijke manieren.
<script>
/*global window: false */
var invert_plaatje = "invert.jpg";
var is_ie = document.namespaces ? 1: 0;
if (is_ie) {
var de_invert_css = "#invert_explorer img:hover{FILTER:Invert;}",
invert_element = document.createElement("style");
invert_element.type = "text/css";
if (invert_element.styleSheet) {
invert_element.styleSheet.cssText = de_invert_css;
} else {
invert_element.appendChild(document.createTextNode(de_invert_css));
}
document.getElementsByTagName("head")[0].appendChild(invert_element);
var innervars = document.getElementById("invert_explorer");
innervars.innerHTML = '<img src="' + invert_plaatje + '" alt="inverted plaatje" />';
} else {
window.addEventListener('load',
function() {
var element = document.getElementById('invert_canvas');
var context = element.getContext('2d');
var img = new Image();
img.addEventListener('load',
function() {
var x = 0,
y = 0;
context.drawImage(this, x, y);
},
false);
img.src = invert_plaatje;
},
false);
document.getElementById("invert_canvas").addEventListener('mouseover',
function() {
var element = document.getElementById('invert_canvas');
var context = element.getContext('2d');
var img = new Image();
img.addEventListener('load',
function() {
var x = 0,
y = 0;
var imgd = context.getImageData(x, y, this.width, this.height);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = 255 - pix[i];
pix[i + 1] = 255 - pix[i + 1];
pix[i + 2] = 255 - pix[i + 2];
}
context.putImageData(imgd, x, y);
},
false);
img.src = invert_plaatje;
},
false);
document.getElementById("invert_canvas").addEventListener('mouseout',
function() {
var element = document.getElementById('invert_canvas');
var context = element.getContext('2d');
var img = new Image();
img.addEventListener('load',
function() {
var x = 0,
y = 0;
context.drawImage(this, x, y);
},
false);
img.src = invert_plaatje;
},
false);
}
</script>