Javascript ile div ekran görüntüsü almak
JavaScriptMerhaba değerli okurlar, bugün javascript ile belirli bir div'in ekran görüntüsünü alıp, fotoğrafı da ekrana yazdıracağız. Bu aksiyonda kurtarıcımız html2canvas eklentisi oluyor.
Fazla uzatmadan uygulamamıza geçelim.
Bir adet index.html sayfası oluşturalım ve <head></head> tagları arasına html2canvas eklentimizi dahil edelim.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
şimdiyse <body></body> tagları arasına ekran görüntüsü çekilecek div'i ve sonucun gösterileceği div'i ekleyelim.
<div id="content">
<h3>Selam</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<button onclick="takeshot()">
Görüntüyü Al
</button>
</div>
<h1>Ekran Resmi:</h1>
<div id="output"></div>
bundan sonraki adımımız JavaScript kısmında aksiyon almak olacak.
<script type="text/javascript">
function takeshot() {
let div = document.getElementById('content');
html2canvas(div).then(function (canvas) {
document.getElementById('output').appendChild(canvas);
})
}
</script>
işlemler tamam, artık Görüntüyü Al butonuna bastığımızda id="content" adlı div görüntüsünü alıp id="output" div içine canvas etiketleri arasına yazdıracak.
Yorumlar (0)