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/
peki ekram görüntüsünü jpg png gibi bir formata nasıl kaydederim
Canvas2Image kütüphanesini inceleyebilirsiniz.
http://hongru.github.io/proj/canvas2image/index.html
Başlangıcı sol üst köşeden değil de ortadan başlatmak için ne yapmak gerekir?
HTML5 canvas ile yapabilirsiniz.
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/