Er is geen CSS ondersteuning.
Let op!
Om het beste effect voor IE9 en de laatste
MOZ-browser te geven, is het script helemaal vernieuwd. Je kan het script downloaden
op de kompoos.nl: http://kompoos.nl/javascripts/image-effects/blur-image.html
Ik heb geen flauw idee waarom iemand plaatjes een blur-effct zou willen geven. Maar als dat dan toch moet heb ik hier een kleine routine die dat cross browser voor elkaar krijgt. De eerste variabele in het script is hoeveel_blur. Verhoog de waarde om het blur-effect te vergroten. Helemaal onderin het script staat bij img.scr de naam van het plaatje wat je een blur wilt geven. Zorg dat in de canvas-tag dezelfde img gebruikt wordt (IE heeft die nodig). Voor de rest niet zo veel te melden. Alle code is valide voor de html5 en het javascript. Plaats de onderstaande code in de body-sectie van jouw pagina om de blur te laten werken.
<p>
<canvas id="blur-plaatje"><!--[if IE]><img id="blur_het" src="blur.jpg"><![endif]--></canvas>
</p>
<script>
var hoeveel_blur = 1;
var isie = 0,het_filter;
if (navigator.userAgent.indexOf("MSIE") != -1) {
isie = 1;}
var ie_blur = (10 * hoeveel_blur);
if (isie == 1) {
het_filter = "progid:DXImageTransform.Microsoft.MotionBlur(direction=90, strength=" + ie_blur + ", add=0)";
document.all.blur_het.style.filter = het_filter;}
function blur_dit(plaatje) {
var i,j,k,n,brd = plaatje.width,hgt = plaatje.height,im = plaatje.data,aantal = hoeveel_blur,
plek = 0,jump = 0,inner = 0,outer = 0,p_array = 0,stapje = 0;
for (n = 0; n < aantal; n++) {
for (var q = 0; q < 2; q++) {
if (q) {
outer = brd;
inner = hgt;
stapje = brd * 4;
} else {
outer = hgt;
inner = brd;
stapje = 4;}
for (i = 0; i < outer; i++) {
jump = q === 0 ? i * brd * 4: 4 * i;
for (k = 0; k < 3; k++) {
plek = jump + k;
p_array = 0;
p_array = im[plek] + im[plek + stapje] + im[plek + stapje * 2];
im[plek] = Math.floor(p_array / 3);
p_array += im[plek + stapje * 3];
im[plek + stapje] = Math.floor(p_array / 4);
p_array += im[plek + stapje * 4];
im[plek + stapje * 2] = Math.floor(p_array / 5);
for (j = 3; j < inner - 2; j++) {
p_array = Math.max(0, p_array - im[plek + (j - 2) * stapje] + im[plek + (j + 2) * stapje]);
im[plek + j * stapje] = Math.floor(p_array / 5);}
p_array -= im[plek + (j - 2) * stapje];
im[plek + j * stapje] = Math.floor(p_array / 4);
p_array -= im[plek + (j - 1) * stapje];
im[plek + (j + 1) * stapje] = Math.floor(p_array / 3);}}}}
return plaatje;}
if (isie === 0) {
var canvas = document.getElementById("blur-plaatje"),
inhoud = canvas.getContext("2d"),
img = new Image();
img.onload = setTimeout(function() {
var brd = img.width,
hgt = img.height,
data_plaatje = null;
canvas.width = brd;
canvas.height = hgt;
inhoud.drawImage(img, 0, 0, brd, hgt);
data_plaatje = inhoud.getImageData(0, 0, brd, hgt);
data_plaatje = blur_dit(data_plaatje);
inhoud.putImageData(data_plaatje, 0, 0);},10);
img.src = "blur.jpg";}
</script>
cache 19-05-2011