Your SlideShare is downloading. ×
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html 5 Canvas Kullanımı ve Kenar Bulma Algoritmaları

5,282

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,282
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. İnternet ProgramcılığıHtml5 Canvas veKenarBulma Algoritmaları Şahabettin Akca B080510044 2012 @ Sakarya üniversitesi
  • 2. Html 5 Html 5 , internetin temel teknolojilerinden olanhtml nin 5. sürümüdür. Günümüzdeki InternetExplorer, Mozilla Firefox, Safari ve Operatarayıcılarının güncel sürümleri tarafından kısmendesteklenmektedir. Halen deneme aşamasındadır veyaygın olarak kullanılmamaktadır. Günümüzün enpopüler sitelerinden olan youtube.com da flash playerolmadanda html5 kullanılarak olarak hiç birkısıtlama olmadan video izlenebiliyor.Bir alışverişsitesi içinIphone, Android, Blackberry gibigünümüzde yaygın olarak kullanılan, akıllı telefonişletim sistemleri ile uyumlu tek tek uygulamalaryapmak maliyetli ve zaman alıcı olabilir bunun yerineHtml5’in yeteneklerinden yararlanılarak bir websitesi oluşturup platformdan bağımsız şekildekullanışlı,hızlı ve kolay erişilebilirlik amaçlarımızaulaşabiliriz.
  • 3. Günümüzde hâlen Html 4.1 kullanılmaktadır. Html 5 ile yeni 20 civarında yeni elementeklenmiştir. Canvasta bunlardan birisidir. Sayfada birtuval alanı oluşturur. Bu alana çizimler javascript ileyapılabilir. Yeni eklenen taglarin yanı sıra<center>,<font> gibi css kullanılarak yapılabilenelementlerin 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 standartnitelik 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 duyulmadanvideo oynatılabilir. Paint uygulaması, 3 boyutlulabirent 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 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 ileoluş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 çizimiStartanglearc(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)
  • 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 üsttekitabloda 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 çizimiJavascript:
  • 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çerlinoktamoveTo(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ğeriayarlanı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 defageniş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*50boyutları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 resimoluşturma ve kesme drawImage methodu ile resim çizim yaptırılabilirbaşlangıç koordinatları 0,0 verilirse resim çizdirmişolunur. Başlangıç ve bitiş koordinatları istenenalanlar belirtilirse resmin yalnızca o kısmını çizmişolur ve kesme (crop) işlemi yapılmış olur. Facebookta ö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 – SvgkarşılaştırmasıSvg ile sık kullanılan kare, diktörtgen,elips gibiçizimler oluşturulabilir, fakat Canvas ile bunlarınyanı sıra daha kompleks işlemlerde yapılabilir.Mühendislik, diyagramlar, organizasyon şemaları,elektrik,havacılık,haritalar, animasyon ve oyunyapı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çaperformans 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. MaskelemeAlç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 KenarBulma Yöntemiimportjava.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;// Constructorpublic ImageMunger( String [] args ) { parseArgs( args );// open imageBufferedImageimage = 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 Sobelile Kenar BulmaAlgoritması
  • 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 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 bitsimage.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

×