|
|
|
Er is geen CSS ondersteuning.
|
|
|
|
|
|
|
|
|
Als je niet van de image-partial-color pagina komt zal je dit wel een vreemde pagina vinden...
De image-edit-pixel pagina is gemaakt omdat de proceure van het voorgaande linkje slechts
één plaatje kon modificeren. "getElementById" kan slechts voor één
item (op een pagina) met dat id "gelden". Omdat er (nog) geen standaardfunctie voor een (get)class(byname) bestaat
liepen enkele trouwe bezoekers "vast" op de procedure. Geen probleem. Op de dns5 staat ook een
procedure die getElementsByClassName "maakt" (bij de javascript-sectie). Omdat de procedure "even" hiermee aanpassen wel een beetje lastig kan zijn,
staat er op deze pagina een werkend voorbeeld. Voor alle details van de procedure verwijs ik naar de pagina
die je met bovenstaande link kan bereiken. Hieronder het stukje html wat laat zien hoe de linkjes met
de plaatjes geregeld moeten worden:
<p> <img height="240" width="160" src="edit-pixel-1.jpg" alt="image-pixel-plaatje-1" class="edit-image-pixels" />| <img height="240" width="160" src="edit-pixel-2.jpg" alt="image-pixel-plaatje-2" class="edit-image-pixels" />| <img height="240" width="160" src="edit-pixel-3.jpg" alt="image-pixel-plaatje-3" class="edit-image-pixels" />| </p> <p> <img height="240" width="160" src="edit-pixel-4.jpg" alt="image-pixel-plaatje-4" class="edit-image-pixels" />| <img height="240" width="160" src="edit-pixel-5.jpg" alt="image-pixel-plaatje-5" class="edit-image-pixels" />| <img height="240" width="160" src="edit-pixel-6.jpg" alt="image-pixel-plaatje-6" class="edit-image-pixels" />| </p> <p> <img height="240" width="160" src="edit-pixel-7.jpg" alt="image-pixel-plaatje-7" class="edit-image-pixels" />| <img height="240" width="160" src="edit-pixel-8.jpg" alt="image-pixel-plaatje-8" class="edit-image-pixels" />| <img height="240" width="160" src="edit-pixel-9.jpg" alt="image-pixel-plaatje-9" class="edit-image-pixels" />| </p>
En hieronder het javascriptje wat volkomen valideert volgens JSLint:
<script>
var i;
function getElementsByClass(knoopje,doedezeclass,tag){
var j,klaselementen=[];
var elementjes=knoopje.getElementsByTagName(tag);
var elementjeslengte=elementjes.length;
var hetpatroon=new RegExp(doedezeclass);
for (i=0,j=0;i<elementjeslengte;i++){
if (hetpatroon.test(elementjes[i].className)){
klaselementen[j]=elementjes[i];
j++;}}
return klaselementen;}
var elvars = getElementsByClass(document,'edit-image-pixels','*');
var willekeurig_plaatje=elvars[0];
function maakvoorIEplaatjegrijs(willekeurig_plaatje){
willekeurig_plaatje.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';}
function regeldepixels(willekeurig_plaatje){
var kanvas = document.createElement('canvas');
var canvasinhoud = kanvas.getContext('2d');
var breedtevanplaatje = willekeurig_plaatje.width;
var de_hoogtevanplaatje = willekeurig_plaatje.height;
kanvas.width = breedtevanplaatje;
kanvas.height = de_hoogtevanplaatje;
canvasinhoud.drawImage(willekeurig_plaatje, 0, 0);
var pixels_plaatje = canvasinhoud.getImageData(0, 0, breedtevanplaatje, de_hoogtevanplaatje);
var de_hoogte=pixels_plaatje.height;
var nieuwe_de_hoogte=de_hoogte-(de_hoogte-20);
var begin_de_hoogte=((de_hoogte-nieuwe_de_hoogte)/8);
var eind_de_hoogte=de_hoogte-begin_de_hoogte;
for(var y = begin_de_hoogte; y < eind_de_hoogte; y++){
for(var x = 50; x < (pixels_plaatje.width-50); 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(){
var delengte= elvars.length;
for(i=0;i<delengte;i++){
willekeurig_plaatje=elvars[i];
if (navigator.userAgent.indexOf("MSIE") != -1) {
maakvoorIEplaatjegrijs(willekeurig_plaatje);
} else {
willekeurig_plaatje.src = regeldepixels(willekeurig_plaatje);}}}
setTimeout(function(){start();},1100);
</script>
De image edit pixel procedure valideert (ook) op de css en de html. Kijk trouwens even naar hoe de 2 grijze vakjes op de plaatjes gemaakt zijn. In de fuctie regeldepixels() kan je exact bepalen welk gedeelte (of gedeelten) van de image je wilt bewerken. En dat kan met een nauwkeurigheid van één pixel.
cache 31-01-2011