Javascript İle Ekran Görüntüsü Almak


html2canvas tarayıcı üzerinden ekran görüntüsü almanızı sağlayan javascript kütüphanesi. Kütüphane tüm işlemleri istemci üzerinde yani tarayıcı üzerinde gerçekleştiriyor.

Kullanım

Kütüphanenin kullanımı oldukça basit, çağırdığımız fonksiyon element ve seçenekler şeklinde 2 değer alıyor. Element olarak hangi alanın ekran görüntüsünü almak istediğinizi geçebilirsiniz, seçenekler içinse şu sayfayı kontrol edebilirsiz.

html2canvas(element, options);

html2canvas fonksiyonun tanımı

Örneğin önce tüm sayfanın ekran görüntüsünü alalım,

html2canvas(document.body, {});

html2canvas ile tüm sayfanın ekran görüntüsünü alan kod örneği

Şimdi aldığımız bu ekran görüntüsünün yükseklik ve genişliğini ayarlayalım, (sol üstten kırpma işlemi gibi çalışır)

html2canvas(document.body, {
  width: 500,
  height: 500
});

500x500 görüntü alma

Son olarak bu ekran görüntüsünü alarak sayfaya ekleyelim, onrendered özelliğine geçeceğiniz fonksiyon ile, ekran görüntüsünden sonra ne işlem yapacağınızı belirtebilirsiniz.

html2canvas(document.body, {
  width: 500,
  height: 500,
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

Görüntü alıp, bu görüntüyü sayfanın içeriğine ekleme kodu örneği

Tarayıcı Desteği

  • Firefox 3.5 +
  • Google Chrome
  • Opera 12+
  • IE9 +
  • Safari6

Örnek Uygulama

Eklenti Sayfası : http://html2canvas.hertzen.com/

Yorumlar