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

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

html2canvas(document.body, {});

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

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

Tarayıcı Desteği

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

Örnek Uygulama

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