Html5 Web Sitenizi Görsele Dönüştürme - Html2Canvas
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Html5 Web Sitenizi Görsele Dönüştürme - Html2Canvas

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(771)
RAPOR ET
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>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol