1. İnternet Programcılığı
Html5 Canvas veKenarBulma Algoritmaları
Şahabettin Akca
B080510044
2012 @ Sakarya üniversitesi

2. Html 5
Html 5 , internetin temel teknolojilerinden olan
html nin 5. sürümüdür. Günümüzdeki Internet
Explorer, Mozilla Firefox, Safari ve Opera
tarayıcılarının güncel sürümleri tarafından kısmen
desteklenmektedir. Halen deneme aşamasındadır ve
yaygın olarak kullanılmamaktadır. Günümüzün en
popüler sitelerinden olan youtube.com da flash player
olmadanda html5 kullanılarak olarak hiç bir
kısıtlama olmadan video izlenebiliyor.Bir alışveriş
sitesi içinIphone, Android, Blackberry gibi
günümüzde yaygın olarak kullanılan, akıllı telefon
işletim sistemleri ile uyumlu tek tek uygulamalar
yapmak maliyetli ve zaman alıcı olabilir bunun yerine
Html5’in yeteneklerinden yararlanılarak bir web
sitesi oluşturup platformdan bağımsız şekilde
kullanışlı,hızlı ve kolay erişilebilirlik amaçlarımıza
ulaşabiliriz.

3. Günümüzde hâlen Html 4.1 kullanılmaktadır.
Html 5 ile yeni 20 civarında yeni element
eklenmiştir. Canvasta bunlardan birisidir. Sayfada bir
tuval alanı oluşturur. Bu alana çizimler javascript ile
yapılabilir. Yeni eklenen taglarin yanı sıra
<center>,<font> gibi css kullanılarak yapılabilen
elementlerin kullanımı kaldırıldı.
Html 5 Canvas Elementi
Canvas elementi <canvas> etiketi ile tanımlanır.
Özellikleri arasında width, height ve diğer standart
nitelik tanımlamaları (id,title,style,tabindex)
yapılabilmektedir.
Canvas ile çizim yapılabilir, yazı yazılabilir,
resimlere efektler verilebilir, <video> ve <canvas>
elementleri ile flash playere gereksinim duyulmadan
video oynatılabilir. Paint uygulaması, 3 boyutlu
labirent oyunu gibi kapsamlı işlerde kullanılmıştır.

4. Canvas ile çizim
Çizgi, yay, elips,
karegibiçizimişlemleriniyapılabilir.
Örnek: 100x100 boyutlarındabirmavikareçizimi.
<canvas id=“canvas1” width=“1200px” height=“1200px”></canvas>
<script type=“text/javascript”>
var canvas = document.getElementById(“canvas1”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “blue”; //doldurulacak renk
ctx.fillRect(10, 10, 100, 100); // x,y,width,height
</script>
Örnek 2:Aşağıdaki gördüğünüz resmi birlikte <canvas> ve javascript ile
oluşturalım.

5. <canvas id=“cizim” width=“200″ height=“100″ style=“border:1px solid
#c3c3c3;”>
Tarayıcınız Canvas Elementini Desteklemiyor
</canvas>
<script type=“text/javascript”>
var c=document.getElementById(“cizim”); // element secildi
var cxt=c.getContext(“2d”); // context oluşturuluyor.
cxt.moveTo(10,10); // çizim koordinatları 0,0 dan 10,10 (x,y) ye taşındı.
cxt.lineTo(150,50); // 10,10 dan 150,50 noktaları arasında bir doğru parçası
çizdirdik.
cxt.lineTo(10,50);//150,50 noktasından 10,50 noktası arasına bir çizgi
(doğru parçası çizdirdik)
cxt.stroke();
</script>
Örnek 3: Daire çizimi
Startangle
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Endangle
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Center
arc(100,75,50,0*Math.PI,1.5*Math.PI)

6. JavaScript syntax:
context.arc(x,y,r,başlangıçAçısı,bitişAçısı,saatyönü);
Saatyönü: true/false değerlerini alabilir.
Başlangıç ve bitiş açıları: numerik olabilir ve üstteki
tabloda görüldüğü gibi pi sayısı ile ifade edilir.
<canvas id=“myCanvas” width=“300” height=“150”></canvas>
<script type=“text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(100,75,50,0*Math.PI,2*Math.PI);//100,75 koordinatlarından başlayıp 50px lik bir daire
çiziyor.
ctx.stroke();
</script>
Örnek 4: Yay çizimi
Javascript:

7. var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
Geçerlinokta
moveTo(20,20)
Eğrinoktası
quadraticCurveTo(20,100,200,20)
Kontrol noktası
quadraticCurveTo(20,100,200,20)
Örnek 5: Şeffaf çizimler, context.globalAlpha değişkeninden transparentlik değeri
ayarlanır 0 ile 1 arasında float değerler alabilir.
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=“red”;

8. ctx.fillRect(20,20,75,50);
ctx.fillStyle=“blue”;
ctx.globalAlpha=0.2;
ctx.fillRect(50,50,75,50);
Örnek 6: Çerçeve kullanarak tablo oluşturma tekniği.
<canvas id=“canvas” width=“150” height=“150”></canvas>
<script>
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104);
ctx.drawImage(document.getElementById('frame'),0,0);
}
</script>
<img id=“source” src=“rhino.jpg“ width=“300” height=“227” alt=““>
<img id=“frame” src=“picture_frame.png“ width=“132” height=“150” alt=““>
Kaynak resimler
Örnek 7: Canvas ile genişletme işlemi, küçük kutu 5,5 özellikleri ile 5 defa
genişletilmiştir.

9. var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.strokeRect(5,5,25,15);
ctx.scale(5,5);
ctx.strokeRect(5,5,25,15);
Örnek 8: Canvas kullanarak çevirme (rotate), aşağıdaki resimdeki gibi 100*50
boyutlarında bir dikdörtgeni 20 derecelik açıyla eğme işlemi yapılıyor.
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,50,100,50);

10. Örnek 9: Canvas ile tuval üzerine yazı yazma
<canvas id=“merhabaDunya” width=“100”
height=“100”>
var c=document.getElementById(“merhabaDunya”);
var ctx=c.getContext(“2d”);
ctx.font=“30px Arial”;
ctx.fillText(“Hello World”,10,50);
Stroke , içi boş yazı formatı;
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=“30px Arial”;
ctx.strokeText(“Hello World”,10,50);

11. Yazı hizalama yöntemi;
<script type=“text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=“20px Arial”
ctx.moveTo(5,50);
ctx.lineTo(295,50);
ctx.stroke();
ctx.textBaseline=“bottom”;
ctx.fillText(“Bottom”,10,50);
ctx.textBaseline=“middle”;
ctx.fillText(“Middle”,97,50);
ctx.textBaseline=“top”;
ctx.fillText(“Top”,175,50);
</script>
Örnek 10: Transform (dönüştürme) işlemi

12. <canvas id=“myCanvas” width=“300”
height=“150”>
</canvas>
<script type=“text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=“yellow”;
ctx.fillRect(0,0,250,100)
ctx.fillStyle=“blue”;
ctx.font=“30px Arial”;
ctx.fillText(“Transform”, 10,30);
ctx.transform(0.93,0.3,-0.3,0.93,0,0);
ctx.fillStyle=“lightblue”;
ctx.fillRect(0,0,250,100)
ctx.fillStyle=“red”;
ctx.fillText(“Transform”, 10,30);

13. </script>
Canvas ile resim
oluşturma ve kesme
drawImage methodu ile resim çizim yaptırılabilir
başlangıç koordinatları 0,0 verilirse resim çizdirmiş
olunur. Başlangıç ve bitiş koordinatları istenen
alanlar belirtilirse resmin yalnızca o kısmını çizmiş
olur ve kesme (crop) işlemi yapılmış olur. Facebook
ta örneğin sıkça kullandığımız bir işlemdir.
Kod:
context.drawImage(imageObj, sourceX, sourceY, sourceWidth,
sourceHeight, destX, destY, destWidth, destHeight);

14. Örnek:
<script>
window.onload = function(){
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);
var imageObj = new Image();
imageObj.onload = function(){
// kırpılmış resim çizimi
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth,
sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src = “ornek.jpg”;
};
</script>
<canvas id=“myCanvas” width=“578” height=“400”>
</canvas>

15. Canvas – Svg
karşılaştırması
Svg ile sık kullanılan kare, diktörtgen,elips gibi
çizimler oluşturulabilir, fakat Canvas ile bunların
yanı sıra daha kompleks işlemlerde yapılabilir.
Mühendislik, diyagramlar, organizasyon şemaları,
elektrik,havacılık,haritalar, animasyon ve oyun
yapımı gibi alanlarda kullanılabilir.
*Canvas ile yapılmış harita uygulaması örneği.

16. Canvas performans olarak svg ye göre daha
üstündür. Özellikle kullanım sayısı arttıkça
performans oranı svg ye göre artmaktadır.
Kenar Bulma
 Görüntüdekiçoğuanlamsalveşekilbilgisikenarlarda
ntahminedilebilir.
 Sadecekenarlarıvermek,
piksellerinparlaklıkseviyelerinivermeyegöregörünt
üyüdahaözbirşekildetemsiletmektedir.

17. • Sayısalbirgörüntüde,
kenaroluşmasınanedenolançeşitlietmenlervardır.
• Homojenolmayanaydınlatma,
birnesneninyüzeyindekifarklırenkler,
nesneninderinliğinindeğişmesiveyüzeynormalinde
kisüreksizlikkenaranedenolur.
Türev ile Kenar Bulma
 Türevinbüyükdeğeraldığıpikseller,
kenaradaylarıdır.
Gradyan

18. • Sayısalbirgörüntününherhangibirpikseldekitürevi,
yatayvedikeyyöndekitürevlerdenoluşanbirvektördü
r.GörüntününtürevinegeneldeGRADYANdenirve
f (x,y) notasyonuilegösterilir:
f ( x, y) f ( x, y)
f ( x, y) ,
x y
• Gradyan,
boyuvebelirlibirreferansnoktasınagöreölçülenaçısı
ylabelirtilebilir.Gradyanaçısıkenarınyönü,
gradyangenliğikenarınkalınlığıhakkındabilgiverir:
2 2
 Gradyangenliği: f ( x, y )
f ( x, y )
x
f ( x, y )
y
 Gradyanaçısı: ( x, y) tan 1 f ( x, y) f ( x, y)
/
y x
Gradyan
• Gradyan, parlaklıkseviyesindekideğişimin en
yüksekolduğuyönübelirtmektedir.
• Bu nedenle, gradyankenaryönünediktir.
Türev Alarak Kenar Bulma
• Süreklibirh(x,y)
fonksiyonununxveyyönlerindekitürevilerişöylehesa
planır:

19. f ( x, y ) f (x , y) f ( x, y ) f ( x, y ) f ( x, y ) f ( x, y )
lim , lim
x 0 y 0
• Biryöndekitürev, o
yöndefarkalmayakarşılıkgeldiğindenbirgörüntünün
xveyyönlerindekitürevleri,
ilgiliyöndefarkalmaylayaklaşıkolarakhesaplanabili
r:
f ( x, y ) f ( x, y )
f ( x, y ) f ( x 1, y ), f ( x, y ) f ( x, y 1)
x y
• Türevalmayı, birsistemgibidüşünebiliriz.Örneğin,
x-yönündetürev alma impulsyanıtıh(x,y)
olandoğrusalveötelemedenbağımsızbirsistemdir:
Türev Alarak Kenar Bulma
 Türevalmayı, birsistemgibidüşünebiliriz.Örneğin,
x-yönündetürev alma impulsyanıtıh(x,y)
olandoğrusalveötelemedenbağımsızbirsistemdir:
 Sonuç; x-yönündetürev alma, görüntününh(x,y)

20. ilekonvolüsyonunuhesaplamayaeşdeğerdir. Benzer
durum, y-yönündetürevalmaiçin de söylenebilir.
Filtreleme
 Farkalmalar,
görüntününverilenmaskelerilefitrelenmesiylehesap
lanabilir.
 Araştırmacılar,
türevindoğruluğunuarttırmakiçinçeşitlifarkalmayö
ntemleriönermiştir. Prewitt, Sobelve Roberts, en
iyibilinentürevhesaplamamaskeleridir.
Maskeleme
Alçakgeçirenkarakteristiğesahipherhangibirmaskekul
lanılabilir.Şekilde, [5,5] boyutlarındaalçakgeçiren
Gauss
maskesininkatsayılarıvekatsayılarınikiboyutlufonk
siyonolarakçizimiverilmiştir.

21. Netleştirme
• Gürültünedeniyle,
birpikselinparlaklıkseviyesikomşularınınkinegöreo
ldukçafarklıdeğerleralabilir.
• Türevalanfiltreler,
parlaklıkseviyesindedeğişmeolanyerleribelirlemek
amcıylatasarlanmıştı.

22. • Gürültüdeğişimenedenolduğundan,
farkalmafiltrelerigürültüyeduyarlıolacaktır. Gürültü
ne kadarbüyükolursaduyarlılık da o
derecedefazlaolacaktır.
• Gürültülüdurumda,
türevhesaplanmadanöncegörüntüyüalçakgeçiren
(yumuşatan) birfiltredengeçirmekfaydalıolabilir.
• Alçakgeçirenfiltreleme,
birpikselindeğerinikomşularınınkineyakınolmayaz
orlacağındangürütüyüyokedecektir.
Canny KenarBulma Algoritması
 Canny algoritması, bilgisayar görmesinde en sık
kullanılan kenar bulma yöntemi olup aşağıdaki
adımları içerir:
• Görüntü, Gauss maskesinin türeviyle filtrelenir
• Gradyan genliği ve yönü belirlenir.
• Birden fazla piksel kalınlıktaki kenarlar,
inceltme ile bir piksel kalınlığa düşürülür (yerel

23. minimum ve maksimumlar yok edilir)
• Biri büyük, diğeri küçük iki eşik değer
tanımlanır. Yüksek eşik değerinden
yararlanılarakkalın kenar eğrileri belirlenir;
düşük eşik değerinden istifade edilerek eğriler
devam ettirilir.
Java ile Sobel Kenar
Bulma Yöntemi
importjava.awt.Graphics;
importjava.awt.image.BufferedImage;
importjava.io.BufferedReader;
importjava.io.File;
importjava.io.FileOutputStream;
importjava.io.FileReader;
importjava.io.IOException;
importjava.io.OutputStream;
importjavax.imageio.ImageIO;
importjavax.swing.JComponent;
importjavax.swing.JFrame;
importjavax.script.ScriptEngine;
importjavax.script.ScriptEngineManager;
publicclass ImageMunger {
// This inner class is our canvas. We draw the image on it.
class ImagePanel extendsJComponent {
BufferedImage theImage = null;
ImagePanel( BufferedImageimage ) {
super();
theImage = image;
}
publicBufferedImage getImage( ) {
return theImage;
}
publicvoid setImage( BufferedImage image) {
theImage = image;
this.updatePanel();
}
publicvoid updatePanel() {

24. invalidate();
getParent().doLayout();
repaint();
}
publicvoid paintComponent( Graphics g ) {
int w = theImage.getWidth( );
int h = theImage.getHeight( );
g.drawImage( theImage, 0,0, w,h, this );
}
} // end ImagePanel inner class
// We need to keep a reference to the ImagePanel:
public ImagePanel theImagePanel = null;
// Constructor
public ImageMunger( String [] args ) {
parseArgs( args );
// open image
BufferedImageimage = openImageFile( args[0] );
// create window
theImagePanel = new ImagePanel( image );
JFrame gMainFrame = newJFrame();
gMainFrame.setTitle( args[0] );
gMainFrame.setBounds(50,80,
image.getWidth( )+10, image.getHeight( )+10);
gMainFrame.setDefaultCloseOperation(3); // dispose
gMainFrame.getContentPane().add( theImagePanel );
gMainFrame.setVisible(true);
}
ImagePanel getImagePanel( ) {
return theImagePanel;
}
BufferedImage openImageFile( String fname ) {
BufferedImage img = null;
try {
File f = newFile( fname );
img = ImageIO.read(f);
}
catch (Exception e) {
showMessage(“Trouble reading file.”);
e.printStackTrace();
}
return img;
}
publicstaticvoid runScriptFromFile( String fileName,
ScriptEngine engine ) {
try {
engine.eval(newjava.io.FileReader( fileName ));
}
catch( Exception exception ) {
exception.printStackTrace();
showMessage( exception.getMessage() );

25. }
}
publicstaticvoid showMessage(String s) {
javax.swing.JOptionPane.showMessageDialog(null, s);
}
void parseArgs( String[] args ) {
if ( args.length< 2 )
tellUserHowToUseThisApp( );
}
void tellUserHowToUseThisApp( ) {
showMessage( “Supply an image file name and a script file name.” );
}
// main()
publicstaticvoid main( String[] args ) {
ImageMunger munger = new ImageMunger( args );
// create a script engine manager & engine
ScriptEngineManager factory = new ScriptEngineManager();
ScriptEngine engine = factory.getEngineByName(“JavaScript”);
engine.put( “Image”, munger.getImagePanel( ).getImage( ) );
engine.put( “Panel”, munger.getImagePanel( ) );
engine.put( “args” , args );
// evaluate JavaScript code from file
runScriptFromFile( args[1], engine );
}
}
Jai Kütüphanesi ve Sobel
ile Kenar Bulma
Algoritması

26. Kaynak kod;
jai = Packages.javax.media.jai;
sobelH = jai.KernelJAI.GRADIENT_MASK_SOBEL_HORIZONTAL;
sobelV = jai.KernelJAI.GRADIENT_MASK_SOBEL_VERTICAL;
pb = new Packages.java.awt.image.renderable.ParameterBlock( );
// ImageMunger puts “Image” in global scope:
pb.addSource( Image );
pb.add( sobelH );
pb.add( sobelV );
renderedOp = jai.JAI.create( “gradientmagnitude”, pb );
var image = renderedOp.getRendering().getAsBufferedImage();
Panel.setImage( invertImage( image ) );
// take BufferedImage as arg; flip all bits in all pixels
function invertImage( image ) {
var w = image.getWidth();
var h = image.getHeight();
var pixels = image.getRGB( 0,0, w,h, null, 0,w );
for ( var i = 0; i < pixels.length; i++ )
pixels[ i ] =~ pixels[ i ]; // flip pixel bits
image.setRGB( 0,0, w,h, pixels, 0, w );
return image;
}

27. Kaynaklar:
- Paul F. Whelan,Derek Molloy, Machine Vision
Algorithms in Java: Techniques and
Implementation. 2002,Ireland
- Dr. Cabil Vural, Görüntü İşleme, Sakarya
Üniversitesi, 2011
- W3schools.com, Html5doctor.com,
developer.mozilla.org