html5 filteri slika - unizg.hrslog.grf.unizg.hr/media/smp/canvas filteri.pdf · html5 filteri •...
TRANSCRIPT
Html5 <canvas> filteri
• Kreiranje jednostavnih filtera za slike uvezene u element <canvas>
1. Loadanje i iscrtavanje originalne slike (drawImage)2. Uzimanje vrijednosti boje svakog piksela (getImageData)3. modifikacija originalnih vrijednosti 4. umetanje novih vrijednosti boja u novu sliku (putImageData)
<!DOCTYPE html><html lang="en"><head><style type="text/css"> canvas {border:1px solid red;}</style></head>
<body><canvas id="mojCanvas" width="1200" height="400"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('mojCanvas');
var c = canvas.getContext('2d');
var slika = new Image();
slika.src = ‘pic.jpg';
//…filteri…
slika.onload = function(){
c.drawImage(slika, 10, 10);
};
}
</script>
</body>
</html>
Osnovni program koji iscrtava piksel grafiku u canvaskontekstu na poziciji 10 10 trenutnog canvas prostora
• Dohvaćanje vrijednosti piksela metodom getImageData() – kreiranje funkcije filtera
//…filteri…
function mojfilter (c, canvas) {
var pikseli = c.getImageData(10, 10, slika.width, slika.height);
var p = pikseli.data;
for (var i = 0; i < p.length; i += 4) {
red = p [i]; // crvena
green = p [i+1] // zelena
blue = p [i+2]; // plava
alpha = p [i+3]; // transparencija
}
c.putImageData(pikseli, 600, 10);
}
• Iscrtavanje nove slike sa RGBA vrijednostima na novoj pozicijiU funkciju iscrtavanja prethodne slike pozvati funkciju filter koja kreira novu sliku na poziciji 600, 10
slika.onload = function(){
c.drawImage(slika, 10, 10);
mojfilter(c, canvas);
};
• Manipulacija vrijednostima piksela – filter negativ
…
negRed = 255 ‐ p[i]; //računanje vrijednosti inverzne crvene
negGreen = 255 ‐ p[i+1]; //inverzna vrijednost zelene
negBlue = 255 ‐ p[i+2]; //inverzna vrijednost plave
//apliciranje novih vrijednosti:
p[i]= negRed;
p[i+1]= negGreen;
p[i+2]= negBlue;
…
• Koristeći operacije množenja i dijeljenja kreirati slične filtere:
Original posvjetljivanje(množenje) tamnjenje(dijeljenje originalnih vrijednosti koeficijentom)
Naglašavanje crvene … zelene ... plave… uz smanjenje ostalih komponenti
• Kreirati crno bijele filtere: • Sive vrijednosti se mogu dobiti iz jednog kanala ili iz kombinacije vrijednosti svih kanala (R=G=B)
Sivi ton iz crvenog kanala… zelenog… plavog …
Sivi ton dobiven formulom S = R*0.3 + G*0.59 + B*0.11 – standardni PhotoshopB&W filterR=G=B=S
• Filteri noise i gradijent
Vrijednosti kanala se množe sa slučajnom vrijednošću 0‐255Math.random(255)
Za svaki red piksela izračun nove vrijednosti bojeformulom R = (i / p.length)*slika.width