home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het javascript-menu

Als je met IE-explorer deze pagina opent zal het hele plaatje grijs worden (na 1100 Msec.). IE is gewoon niet in staat om "lekker" met canvas om te gaan. Gewoon een goede browser gebruiken... Als je met een normale browser deze pagina opent dan zie je dat het plaatje een grijs middenvlak krijgt, en dat de boven- en de onder-kant (en de marges links en rechts) in kleur zijn. Het is dus mogelijk om een plaatje gedeeltelijk te bewerken voor wat betreft kleur (of opacity). En eigenlijk is dat nog makkelijk ook. In dit voorbeeld kan je zien hoe het plaatje is "opgedeeld". Experimenteer met de getalletjes om de vorm en de afmeting van het "venster" te veranderen.
Eerst even hieronder de img (die het id "maak_gedeeltelijk_grijs" heeft):

<img src="grijs-plaatje.jpg" alt="gedeeltelijk grijs" id="maak_gedeeltelijk_grijs" />
		

En hieronder het stukje javascript wat uiteraard volkomen valideert volgens JSLint:

<script>
	var eenplaatje = document.getElementById('maak_gedeeltelijk_grijs');
	function maakplaatjegrijsIE(eenplaatje){
		eenplaatje.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';}
	function maakplaatjegrijs(eenplaatje){
		var kanvas = document.createElement('canvas');
		var canvasinhoud = kanvas.getContext('2d');
		var breedtevanplaatje = eenplaatje.width;
		var hoogtevanplaatje = eenplaatje.height;
		kanvas.width = breedtevanplaatje;
		kanvas.height = hoogtevanplaatje;
		canvasinhoud.drawImage(eenplaatje, 0, 0);
		var pixels_plaatje = canvasinhoud.getImageData(0, 0, breedtevanplaatje, hoogtevanplaatje);
		var hoogte=pixels_plaatje.height;
		var nieuwe_hoogte=hoogte-(hoogte/4);
		var begin_hoogte=((hoogte-nieuwe_hoogte)/2);
		var eind_hoogte=hoogte-begin_hoogte;
		for(var y = begin_hoogte; y < eind_hoogte; y++){
			for(var x = 30; x < (pixels_plaatje.width-30); x++){
				var i = (y * 4) * pixels_plaatje.width + x * 4;
				var gemiddelde = (pixels_plaatje.data[i] + pixels_plaatje.data[i + 1] + pixels_plaatje.data[i + 2]) / 3;
				pixels_plaatje.data[i] = gemiddelde; 
				pixels_plaatje.data[i + 1] = gemiddelde; 
				pixels_plaatje.data[i + 2] = gemiddelde;}}
		canvasinhoud.putImageData(pixels_plaatje, 0, 0, 0, 0, pixels_plaatje.width, pixels_plaatje.height);
		return kanvas.toDataURL();}
	function start(){
		if (navigator.userAgent.indexOf("MSIE") != -1) {
			maakplaatjegrijsIE(eenplaatje);
		} else {
			eenplaatje.src = maakplaatjegrijs(eenplaatje);}}
	setTimeout(function(){start();},1100);
</script>
		

De image partial color procedure valideert ook op de css en de html.

UPDATE.
Als je in plaats van één plaatje er meerdere op een pagina wilt bewerken kan je even bij de image-edit-pixel pagina kijken hoe je dat voor elkaar kan krijgen.

cache 09-02-2011