Javascript

Tıklanan Resmi Orijinal Boyutunda Canvas Ekranına Yükleme

Canvas, web sayfalarının 2 boyutlu bir şekilde düzenlenmesini sağlar. Görsel bir ortam sunduğu için resimler üzerinde birçok işlemlerin gerçekleştirilmesini sağlar. 2 boyutlu oyunların ve eğitim portalı oluşturulması için kullanlır. Bu uygulamamaızda küçültülmüş olan resme tıkladığımızda resmin orjinal haliyle canvas ekranına yüklenmesini sağlayacağız.

    <canvas id="myCanvas"></canvas>
    <img id="dene" src="sayfa1.png" style="width:30px;height:25px;" />
Kodlar ise aşağıdaki gibi olacaktır.
    <script>
        $(function () {
            $("#dene").click(function () {
                c = document.getElementById('myCanvas');
                ctx = document.getElementById('myCanvas').getContext("2d");
 
                var myImg = this; //document.querySelector("#dene");
                var realWidth = myImg.naturalWidth;
                var realHeight = myImg.naturalHeight;
 
                var img = new Image();
                img.src = $(this).attr("src");
                c.width = realWidth;
                c.height = realHeight;
                img.onload = () => ctx.drawImage(img, 0, 0); 
                //img.onload = () => ctx.drawImage(img, 0, 0, rx, ry); 
                //img.onload = () => ctx.drawImage(img, 0, 0, rx, ry, cx, cy); 
            });
        })
    </script>
 

 
İlgili Makaleler
Javascript Kodlarıyla Tarayıcı Penceresinde Yön Tuşlarıyla Kutunun Hareket Ettirilmesi
Radio Button İçinden Seçilen Değeri Görüntüleyen Programı Javascript Script Dilinde Yapınız
JavaScript Kodlarıyla TextBox Nesnesine Sadece Sayıların Girilmesini Sağlama
Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Bölme İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Birinci Dereceden Bir Bilinmeyenli Bir Denkleme Ait Çözüm Kümesine Göre Grafik Oluşturan Programı Javascript Script Dilinde Yapınız
Koordinat Düzleminde Verilen Bir Noktanın Hangi Bölgeye Düştüğünü Bulan Programı Javascript Script Dilinde Yapınız
Faktöriyel Hesabı Yapan Javascript Uygulaması
Web Sayfasında Tıklanan Resmin Gerçek Boyutunu Öğrenme
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
JavaScript Sınıf Bildirimleri (Class Declarations) ile Sınıf Tanımlama
Çarpma İşaretini Kullanmadan İki Sayıyı Çarpan Programı Javascript Script Dilinde Yapınız
Yayınlanan Web Service Hizmetini Terminal Tabanlı Web Sayfasında Kullanma
RadioButton Yardımıyla Web Sayfasının Arkaplan Rengini Değiştiren Uygulamayı Javascript Kodlarıyla Tasarlama
ListBox Yardımıyla Listelenen Dosya Uzantılarının Hangi Medya Dosyası Olduğunu Bulan Web Sayfasını Javascript Kodlarıyla Düzenleme
Resmin Üzerinde Click, MouseOver, MouseOut Olaylarını Uygulayan Programı Javascript Script Dilinde Yapınız
Mevcut Tarihi Takvim Yaprağı Şeklinde Gösteren Programı Javascript Script Dilinde Yapınız
Div Katmanı İçinde Gösterilen Metni Silen Programı Javascript Script Dilinde Yapınız
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama3
Web Sayfasına JavaScript Kodlarını Tanıtma

Yorum Ekle
   
Kötü İyi