Internet Explorer gebruikt zijn native pixelate-filter om deze procedure uit te voeren. De overige browsers zijn in staat om op pixel-niveau deze klus te klaren. Om deze procedure op jouw pagina te gebruiken moet je de html-regel dáár plaatsen waar je het effect wilt laten verschijnen, en het javascript dien je zo laag als mogelijk in de body-sectie van jouw pagina te plaatsen. De procedure is geheel cross browser en valideert onder de strenge JSLint-norm.
<div id="pixelate_image"><canvas id="pixelate_canvas"></canvas></div>
<script>
/*global window: false */
var pixelate_plaatje = "pixelate.jpg";
var is_iexp = document.namespaces ? 1: 0;
if (is_iexp) {
var de_css_pixelate = '#pixelate_image img:hover{FILTER: progid:DXImageTransform.Microsoft.Pixelate(enabled=false);}' +
'#pixelate_image img{FILTER: progid:DXImageTransform.Microsoft.Pixelate(maxsquare=10);}',
pixelate_element = document.createElement("style");
pixelate_element.type = "text/css";
if (pixelate_element.styleSheet) {
pixelate_element.styleSheet.cssText = de_css_pixelate;
} else {
pixelate_element.appendChild(document.createTextNode(de_css_pixelate));
}
document.getElementsByTagName("head")[0].appendChild(pixelate_element);
var innervars = document.getElementById("pixelate_image");
innervars.innerHTML = '<img src="' + pixelate_plaatje + '" alt="pixelated plaatje" />';
} else {
window.addEventListener('load',
function() {
var element = document.getElementById('pixelate_canvas');
var context = element.getContext('2d');
var img = new Image();
img.addEventListener('load',
function() {
var x = 0,
y = 0;
context.drawImage(this, x, y);
var image_data = context.getImageData(x, y, this.width, this.height);
var data_pixel = image_data.data;
for (var i = 0, n = data_pixel.length; i < n; i += 4) {
data_pixel[i] = data_pixel[i];
data_pixel[i + 1] = parseInt(Math.random() * 256, 10);
data_pixel[i + 2] = data_pixel[i + 2];
}
context.putImageData(image_data, x, y);
},
false);
img.src = pixelate_plaatje;
},
false);
document.getElementById("pixelate_canvas").addEventListener('mouseover',
function() {
var element = document.getElementById('pixelate_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 = pixelate_plaatje;
},
false);
document.getElementById("pixelate_canvas").addEventListener('mouseout',
function() {
var element = document.getElementById('pixelate_canvas');
var context = element.getContext('2d');
var img = new Image();
img.addEventListener('load',
function() {
var x = 0,
y = 0;
var image_data = context.getImageData(x, y, this.width, this.height);
var data_pixel = image_data.data;
for (var i = 0, n = data_pixel.length; i < n; i += 4) {
data_pixel[i] = data_pixel[i];
data_pixel[i + 1] = parseInt(Math.random() * 256, 10);
data_pixel[i + 2] = data_pixel[i + 2];
}
context.putImageData(image_data, x, y);
},
false);
img.src = pixelate_plaatje;
},
false);
}
</script>