İnternet Programcılığı

Html5 Canvas ve Kenar Bulma Algoritmaları

Şahabettin Akca

B080510044

2012 @ Sakarya üniversitesi

Html 5Html 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çin Iphone, 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.

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 ElementiCanvas 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.

Canvas ile çizimÇizgi, yay, elips, kare gibi çizim işlemlerini

yapılabilir.

Örnek: 100x100 boyutlarında bir mavi kare ç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 renkctx.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.

<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

Startanglearc(100,75,50,0*Math.PI,1.5*Math.PI)Endanglearc(100,75,50,0*Math.PI,1.5*Math.PI)Centerarc(100,75,50,0*Math.PI,1.5*Math.PI)

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:

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çerli noktamoveTo(20,20)Eğri noktası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”;

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.

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);

Ö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);

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

<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);

</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);

Ö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>

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.

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ğu anlamsal ve şekil bilgisi

kenarlardan tahmin edilebilir. Sadece kenarları vermek, piksellerin parlaklık

seviyelerini vermeye göre görüntüyü daha öz bir şekilde temsil etmektedir.

• Sayısal bir görüntüde, kenar oluşmasına neden olan çeşitli etmenler vardır.

• Homojen olmayan aydınlatma, bir nesnenin yüzeyindeki farklı renkler, nesnenin derinliğinin değişmesi ve yüzey normalindeki süreksizlik kenara neden olur.

Türev ile Kenar Bulma Türevin büyük değer aldığı pikseller, kenar

adaylarıdır.

Gradyan

• Sayısal bir görüntünün herhangi bir pikseldeki türevi, yatay ve dikey yöndeki türevlerden oluşan bir vektördür. Görüntünün türevine genelde GRADYAN denir ve f (x,y) notasyonu ile gösterilir:

• Gradyan, boyu ve belirli bir referans noktasına göre ölçülen açısıyla belirtilebilir. Gradyan açısı kenarın yönü, gradyan genliği kenarın kalınlığı hakkında bilgi verir:

Gradyan genliği:

Gradyan açısı:

Gradyan• Gradyan, parlaklık seviyesindeki değişimin en

yüksek olduğu yönü belirtmektedir.

• Bu nedenle, gradyan kenar yönüne diktir.

Türev Alarak Kenar Bulma• Sürekli bir h(x,y) fonksiyonunun x ve y

yönlerindeki türevileri şöyle hesaplanır:

∇ f (x , y )=[∂ f (x , y )∂ x

,∂ f ( x , y )

∂ y ]

‖∇ f ( x , y )‖=√(∂ f ( x , y )∂ x )

2

+(∂ f ( x , y )∂ y )

2

θ( x , y )=tan−1(∂ f (x , y )∂ y

/∂ f ( x , y )

∂ x )

• Bir yöndeki türev, o yönde fark almaya karşılık geldiğinden bir görüntünün x ve y yönlerindeki türevleri, ilgili yönde fark almayla yaklaşık olarak hesaplanabilir:

• Türev almayı, bir sistem gibi düşünebiliriz. Örneğin, x-yönünde türev alma impuls yanıtı h(x,y) olan doğrusal ve ötelemeden bağımsız bir sistemdir:

Türev Alarak Kenar Bulma Türev almayı, bir sistem gibi düşünebiliriz.

Örneğin, x-yönünde türev alma impuls yanıtı h(x,y) olan doğrusal ve ötelemeden bağımsız bir sistemdir:

Sonuç; x-yönünde türev alma, görüntünün h(x,y)

∂ f ( x , y )∂ x

= limε→0

( f ( x+ε , y )−f (x , y )ε ) ,

∂ f ( x , y )∂ y

= limε→0

( f ( x , y+ε )−f (x , y )ε )

∂ f ( x , y )∂ x

≈f ( x , y )−f ( x−1 , y ) , ∂ f (x , y )

∂ y≈f ( x , y )−f ( x , y−1 )

ile konvolüsyonunu hesaplamaya eşdeğerdir. Benzer durum, y-yönünde türev alma için de söylenebilir.

Filtreleme Fark almalar, görüntünün verilen maskeler ile

fitrelenmesiyle hesaplanabilir. Araştırmacılar, türevin doğruluğunu arttırmak

için çeşitli fark alma yöntemleri önermiştir. Prewitt, Sobel ve Roberts, en iyi bilinen türev hesaplama maskeleridir.

MaskelemeAlçak geçiren karakteristiğe sahip herhangi bir

maske kullanılabilir. Şekilde, [5,5] boyutlarında alçak geçiren Gauss maskesinin katsayıları ve katsayıların iki boyutlu fonksiyon olarak çizimi verilmiştir.

Netleştirme• Gürültü nedeniyle, bir pikselin parlaklık seviyesi

komşularınınkine göre oldukça farklı değerler alabilir.

• Türev alan filtreler, parlaklık seviyesinde değişme olan yerleri belirlemek amcıyla tasarlanmıştı.

• Gürültü değişime neden olduğundan, fark alma filtreleri gürültüye duyarlı olacaktır. Gürültü ne kadar büyük olursa duyarlılık da o derecede fazla olacaktır.

• Gürültülü durumda, türev hesaplanmadan önce görüntüyü alçak geçiren (yumuşatan) bir filtreden geçirmek faydalı olabilir.

• Alçak geçiren filtreleme, bir pikselin değerini komşularınınkine yakın olmaya zorlacağından gürütüyü yok edecektir.

Canny Kenar Bulma 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 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ılarak kalın kenar eğrileri belirlenir; düşük eşik değerinden istifade edilerek eğriler devam ettirilir.

Java ile Sobel Kenar Bulma Yöntemiimport java.awt.Graphics;import java.awt.image.BufferedImage;import java.io.BufferedReader;import java.io.File;import java.io.FileOutputStream;import java.io.FileReader;import java.io.IOException;import java.io.OutputStream;import javax.imageio.ImageIO;import javax.swing.JComponent;import javax.swing.JFrame;import javax.script.ScriptEngine;import javax.script.ScriptEngineManager;

public class ImageMunger {

// This inner class is our canvas. We draw the image on it. class ImagePanel extends JComponent {

BufferedImage theImage = null;

ImagePanel( BufferedImage image ) { super(); theImage = image; }

public BufferedImage getImage( ) { return theImage; }

public void setImage( BufferedImage image) { theImage = image; this.updatePanel(); }

public void updatePanel() {

invalidate();

getParent().doLayout(); repaint(); }

public void 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 BufferedImage image = openImageFile( args[0] );

// create window theImagePanel = new ImagePanel( image ); JFrame gMainFrame = new JFrame(); 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 = new File( fname ); img = ImageIO.read(f); } catch (Exception e) { showMessage(“Trouble reading file.”); e.printStackTrace(); }

return img; }

public static void runScriptFromFile( String fileName, ScriptEngine engine ) {

try { engine.eval(new java.io.FileReader( fileName )); } catch( Exception exception ) { exception.printStackTrace(); showMessage( exception.getMessage() ); } }

public static void 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() public static void 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ı

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 pixelsfunction 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;}

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