Het is absoluut geen probleem om oude IE-browsers ook deze "pixelate" te laten uitvoeren. Met FILTER: progid:DXImageTransform.Microsoft.Pixelate(enabled=false);} is dat niet al te moeilijk... Als je een voorbeeld van dat filter wilt heb ik een pixel-pagina op de kompoos.nl. De reden om dus niet oude IE-browsers nog te "verwennen" is dat het niet meer van deze tijd is om veel (extra) javascript te gaan gebruiken voor een "middel-eeuws" filter, dat er nou niet eens zo fraai uitziet (het eindresultaat). De andere reden is dat IE, vanaf versie 9, zich keurig aan de regeltjes houdt (en support voor canvas geeft). Als we allemaal nu eens stoppen met het supporten van dergelijk soort "museum-stukken", zullen de gebruikers van IE5 (of nog rotter) eindelijk eens hun browser naar de laatste versie gaan upgraden. Vandaar dat, bij het ontbreken van canvas-support de mededeling: upgrade-jouw-browser-voor-canvas-support wordt gegeven. Voor het overige spreekt de pixel-procedure voor zichzelf. Plaats de html-code dáár waar je de "pixel-show" wilt laten verschijnen, en plaats het javascript zo laag als mogelijk in de body-sectie van jouw pagina. De html en CSS valideren netjes volgens W3C, en het javascript valideert volgens de strenge JSLint-norm(en).
<canvas id="pixel_show" width="320" height="240">upgrade jouw browser voor canvas support</canvas>
<script>
/*global pixelate_slideshow: true */
/*global document: false */
/*global Image: false */
/*global slideshow_interval: true */
/*global setInterval: false */
/*global clearInterval: false */
/*global pixelate_afbeelding: true */
/*global setTimeout: false */
/*global window: false */
var aantal_pixels = 22,
plaatjes = [];
plaatjes[0] = "pixelate-slideshow-0.jpg";
plaatjes[1] = "pixelate-slideshow-1.jpg";
plaatjes[2] = "pixelate-slideshow-2.jpg";
plaatjes[3] = "pixelate-slideshow-3.jpg";
plaatjes[4] = "pixelate-slideshow-4.jpg";
plaatjes[5] = "pixelate-slideshow-5.jpg";
var i = 0,
x, y, m, n, rood, groen, blauw, id_interval, lengte_array = plaatjes.length,
huidige_plaatje, quick_start_show = 1,
dummy, pixelation = aantal_pixels;
function pixelate(context, object_image, breedte_plaatje, hoogte_plaatje, destX, destY) {
dummy = object_image;
var sourceX = destX;
var sourceY = destY;
var imageData = context.getImageData(sourceX, sourceY, breedte_plaatje, hoogte_plaatje);
var data = imageData.data;
for (y = 0; y < hoogte_plaatje; y += pixelation) {
for (x = 0; x < breedte_plaatje; x += pixelation) {
rood = data[((breedte_plaatje * y) + x) * 4];
groen = data[((breedte_plaatje * y) + x) * 4 + 1];
blauw = data[((breedte_plaatje * y) + x) * 4 + 2];
for (n = 0; n < pixelation; n++) {
for (m = 0; m < pixelation; m++) {
if (x + m < breedte_plaatje) {
data[((breedte_plaatje * (y + n)) + (x + m)) * 4] = rood;
data[((breedte_plaatje * (y + n)) + (x + m)) * 4 + 1] = groen;
data[((breedte_plaatje * (y + n)) + (x + m)) * 4 + 2] = blauw;
}
}
}
}
}
context.putImageData(imageData, destX, destY);
pixelation -= 1;
}
pixelate_slideshow = function () {
var frames_per_seconde = 20;
var timeInterval = 1000 / frames_per_seconde;
var canvas = document.getElementById("pixel_show");
var context = canvas.getContext("2d");
var object_image = new Image();
slideshow_interval = function () {
pixelation = aantal_pixels;
var breedte_plaatje = object_image.width;
var hoogte_plaatje = object_image.height;
var destX = canvas.width / 2 - breedte_plaatje / 2;
var destY = canvas.height / 2 - hoogte_plaatje / 2;
id_interval = setInterval(function () {
context.drawImage(object_image, destX, destY);
if (pixelation < 1) {
clearInterval(id_interval);
pixelate_slideshow();
} else {
pixelate(context, object_image, breedte_plaatje, hoogte_plaatje, destX, destY);
}
}, timeInterval);
};
if (i === lengte_array) {
i = 0;
}
pixelate_afbeelding = plaatjes[i];
i++;
object_image.src = pixelate_afbeelding;
if (quick_start_show === 1) {
quick_start_show++;
slideshow_interval();
} else {
setTimeout(function () {
slideshow_interval();
}, 3000);
}
};
window.onload = function () {
setTimeout(function () {
pixelate_slideshow();
}, 400);
};
</script>