KOMPOOS.NL
blur image
sitemap
voorbeeld blur image
uitleg blur image procedure
Plaats de hieronderstaande html-code dáár waar het blur-plaatje moet komen te staan. Het javascript (wat onder de html-code staat) moet je zo laag mogelijk in de body-sectie plaatsen. In het javascript moet je de naam van een file (jpg, gif etc.) invoeren bij de variabele bewerk_het_plaatje. Houd er rekening mee dat het plaatje op dezelfde server moet staan. Voor het overige kan je in code nog de variabelen: hoeveel_blur, laad_vertraging en blur-correctie aanpassen naar wens. Het script is cross browser, en foutloos volgens de JSLint norm.
html-code
<p>
<canvas id="blur_canvas">
<!--[if lt IE 9]><img id="blur_dit" src="" alt="blur image" /><![endif]-->
</canvas>
</p>
het javascript
<script>
/*global doe_het: false */
var bewerk_het_plaatje = "image/blur.jpg";
var hoeveel_blur = 1;
var canvas;
var laad_vertraging = 200;
var blur_correctie = 4;
var de_breedte;
var de_hoogte;
var is_ie = 0;
var is_ie_9 = 0;
var het_filter;
var data_plaatje;
var check_voor_ie9_browser = {
browser_versie: function() {
var de_versie = 999;
if (navigator.appVersion.indexOf("MSIE") != -1) {
de_versie = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return de_versie;
}
};
if (navigator.userAgent.indexOf("MSIE") != -1 && (check_voor_ie9_browser.browser_versie() < 9)) {
is_ie = 1;
}
if (navigator.userAgent.indexOf("MSIE") != -1 && check_voor_ie9_browser.browser_versie() > 8) {
is_ie_9 = 1;
}
var ie_blur = (10 * hoeveel_blur);
if (is_ie == 1 && is_ie_9 === 0) {
het_filter = "progid:DXImageTransform.Microsoft.MotionBlur(direction=90, strength=" + ie_blur + ", add=0)";
document.all.blur_dit_ie.src = bewerk_het_plaatje;
document.all.blur_dit_ie.style.filter = het_filter;
document.all.blur_dit_ie.onmouseover = function() {
this.style.filter = "";
this.style.marginLeft = blur_correctie;
};
document.all.blur_dit_ie.onmouseout = function() {
this.style.filter = het_filter;
this.style.marginLeft = "0";
};
}
function blur_dit(plaatje) {
var i,
j,
k,
n,
de_breedte = plaatje.width,
de_hoogte = plaatje.height,
inhoud_img = 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 = de_breedte;
inner = de_hoogte;
stapje = de_breedte * 4;
} else {
outer = de_hoogte;
inner = de_breedte;
stapje = 4;
}
for (i = 0; i < outer; i++) {
jump = q === 0 ? i * de_breedte * 4: 4 * i;
for (k = 0; k < 3; k++) {
plek = jump + k;
p_array = 0;
p_array = inhoud_img[plek] + inhoud_img[plek + stapje] + inhoud_img[plek + stapje * 2];
inhoud_img[plek] = Math.floor(p_array / 3);
p_array += inhoud_img[plek + stapje * 3];
inhoud_img[plek + stapje] = Math.floor(p_array / 4);
p_array += inhoud_img[plek + stapje * 4];
inhoud_img[plek + stapje * 2] = Math.floor(p_array / 5);
for (j = 3; j < inner - 2; j++) {
p_array = Math.max(0, p_array - inhoud_img[plek + (j - 2) * stapje] + inhoud_img[plek + (j + 2) * stapje]);
inhoud_img[plek + j * stapje] = Math.floor(p_array / 5);
}
p_array -= inhoud_img[plek + (j - 2) * stapje];
inhoud_img[plek + j * stapje] = Math.floor(p_array / 4);
p_array -= inhoud_img[plek + (j - 1) * stapje];
inhoud_img[plek + (j + 1) * stapje] = Math.floor(p_array / 3);
}
}
}
}
return plaatje;
}
if (is_ie_9 == 1) {
canvas = document.getElementById("blur_canvas"),
canvas.onmouseover = function() {
data_plaatje = null;
inhoud.drawImage(img, 0, 0, de_breedte, de_hoogte);
inhoud.putImageData(data_plaatje, 0, 0);
}
canvas.onmouseout = function() {
doe_het();
}
}
if (is_ie === 0 || is_ie_9 == 1) {
canvas = document.getElementById("blur_canvas"),
inhoud = canvas.getContext("2d"),
img = new Image();
if (is_ie_9 == 1) {
img.src = bewerk_het_plaatje;
}
img.onload = setTimeout(function() {
doe_het();
},
laad_vertraging);
img.src = bewerk_het_plaatje;
canvas.onmouseover = function() {
data_plaatje = null;
inhoud.drawImage(img, 0, 0, de_breedte, de_hoogte);
inhoud.putImageData(data_plaatje, 0, 0);
};
canvas.onmouseout = function() {
doe_het();
};
}
function doe_het(plaatje) {
de_breedte = img.width;
de_hoogte = img.height;
data_plaatje = null;
canvas.width = de_breedte;
canvas.height = de_hoogte;
inhoud.drawImage(img, 0, 0, de_breedte, de_hoogte);
data_plaatje = inhoud.getImageData(0, 0, de_breedte, de_hoogte);
data_plaatje = blur_dit(data_plaatje);
inhoud.putImageData(data_plaatje, 0, 0);
}
</script>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.