home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het javascript-menu

Nee, nee.. IE heeft een leuke Xray in plaats van de edge detect. Dat komt dicht genoeg in de buurt van het effect wat alle andere browsers op deze wereld moeiteloos met deze pagina laten zien. Het is niet anders.
Persoonlijk vind ik dat de afbeeldingen er niet mooier op worden als je deze "edge-procedure" toepast. Maar er is vraag naar... Daarom hieronder het stukje javascript van de edge-detection. In de broncode van het script heb ik aangegeven welke variabelen je kan wijzigen. Je kan de "gevoeligheid" en de grijswaarde van de "edge-afbeelding" hier eenvoudig aanpassen aan jouw eigen smaak. Geef een plaatje het id "detecteren" en alles gaat verder vanzelf.
De eerlijkheid gebiedt mij te zeggen dat de edge-detect gemaakt wordt door het plaatje eerst naar grijs te transformeren en daarna de grijswaarden te manipuleren. Nadeel is dat de lijntjes niet ragfijn zijn en dat er "vlakken" te zien zijn; het voordeel is dat er niet zwaar "gerekend" hoeft te worden: dus alles is super-snel.
Als je een perfecte detection wilt heb ik een php-detect procedure op de site staan.

<script type="text/javascript">
var i,
j;
function detect_edge(image, doeplaatje) {
	var decanvas = document.createElement("canvas");
	var canvasinhoud = decanvas.getContext("2d");
	var plaatjebreedte = image.width;
	var plaatjehoogte = image.height;
	decanvas.width = plaatjebreedte;
	decanvas.height = plaatjehoogte;
	canvasinhoud.drawImage(image, 0, 0);
	var imageData = canvasinhoud.getImageData(0, 0, plaatjebreedte, plaatjehoogte);
	for (i = 0; i < imageData.height; i++) {
		for (j = 0; j < imageData.width; j++) {
			var index = (i * 4) * imageData.width + (j * 4);
			var red = imageData.data[index];
			var green = imageData.data[index + 1];
			var blue = imageData.data[index + 2];
			var alpha = imageData.data[index + 3];
			var average = (red + green + blue) * 0.3333;

			// Deze parameters kan je veranderen
			if(average>4){average=average+30;}
			if(average>150){average=255;}
			if(average>50 && average<255){average=average-80;}
			if(average<0){average=0;}
			// Hierna liever niets meer wijzigen


			imageData.data[index] = average;
			imageData.data[index + 1] = average;
			imageData.data[index + 2] = average;
			imageData.data[index + 3] = alpha;
		}
}
	canvasinhoud.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
	if (doeplaatje) {
		var myDiv = document.createElement("div");
		myDiv.appendChild(decanvas);
		image.parentNode.appendChild(decanvas);
	}
	return decanvas.toDataURL();
}
function detecteer_edge(image) {
	var is_iexp=document.namespaces ? 1: 0;
	if (is_iexp) {
		image.style.zoom = 1;
		image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(xray=1';
		image.onmouseover = function() {
			this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(xray=0)';
		};
		image.onmouseout = function() {
			this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(xray=1)';
		};
	} else {
		image.mouseOverImage = image.src;
		image.onload = function() {
			return true;
		};
		image.normalImage = detect_edge(image, false);
		image.onmouseover = function() {
			this.src = this.mouseOverImage;
		};
		image.onmouseout = function() {
			this.src = this.normalImage;
		};
		image.src = image.normalImage;
	}
}
function doehet(func) {
	var oudeload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oudeload) {
				oudeload();
			}
			func();
		};
	}
}
doehet(function() {
	var datplaatje = document.getElementById("detecteren");
	detecteer_edge(datplaatje);
});
</script>  
		

cache 10-02-2011