Bu gün size size ait bir websitenizi görsele çevirmeyi anlatacağım.Bunun için kullanacağımız eklenti
html2canvas.Bu eklentiyi dahil ettiğimiz sayfanın tüm
html+css yapısını canvas yani tuvale aktarıyor.Canvasın toDataURL komutu sayesinde,canvası bir jpg yada png dosyasına çevirebiliyoruz.
İndir : http://ustaderslik.com/dosya/html2canvas.rar
İncele : http://ustaderslik.com/ornek/html2canvas/
Şimdi kullanımına geçelim.
<script type="text/javascript" src="html2canvas.js"></script>
Öncelikle syafaya html2canvası dahil ediyoruz.
html2canvas(document.body, { onrendered: function(canvas) { document.getElementById("canvas").appendChild(canvas); } });
Burada nerenin canvasa aktarılacağını belirtiyoruz.İdsi canvas olan divin içine bir canvas oluşturuyoruz.Daha sonra body tagının içindeki tüm objeleri tuvale aktarıyoruz.
$("#canvas canvas")[0].toDataURL('image/jpeg',1);
Bu şekilde ise canvası resime dönüştürüyoruz.ilk parametre görselin türü.İkinci parametregörselin kalitesi.
0-1 arası değer alıyor.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
$(function(){
$("#resim").click(function(){
var resim = $("#canvas canvas")[0].toDataURL('image/jpeg',1);
$("body").append('<img style="border:3px solid red;" src="'+resim+'"/>');
});
});
</script>
<style type="text/css">
#alan{width:100%;height:100%;background:url(./karinca.gif);position:absolute;top:0;left:0;z-index:-10;}
.logo{width:175px;height:150px;background:url(icon.png);margin:auto;margin-top:100px;opacity:.3;}
.yok{text-align:center;color:#fff;font-family:Georgia;font-size:30px;}
.yok span{font-size:120px;font-family:'Shojumaru', cursive;}
.ara{text-align:center;margin-bottom:200px;}
.ara input{width:650px;height:40px;line-height:40px;margin-top:25px;padding:10px;font-family:'Arial;font-size:20px;outline:none;border:none;}
</style>
</head>
<body>
<button id="resim">Sayfayı Görüntüsünü Al</button>
<div id="cevir">
<div id="alan"></div>
<div class="logo"></div>
<div class="yok"> <br /> Sayfa Bulunamadı...</div>
<div class="ara">
<input type="text" name="kelime" value="Ne Aramıstın ?" />
</div>
</div>
<div id="canvas" style="display:none;"></div>
<script type="text/javascript">
$(function(){ html2canvas(document.body, { onrendered: function(canvas) { document.getElementById("canvas").appendChild(canvas); } }); })
</script>
</body>
</html>
UstaDerslik
