Canvas Elementindeki Gifleri (Animasyonları) Yakalama, Kaydetme?

admin 20 Aralık 2016 0 Yorum

HTML’de normal olarak animasyonlu resimleri, yani gifleri kaydetmek çok kolaydır. Çünkü gifin kaynağı tek bir dosyadır. O dosyaya bir şekilde zorlanmadan ulaşırsınız ve kaydedersiniz. Peki <canvas> elementi içinde oluşturulan gifleri nasıl yakalarız veya kaydederiz?

Canvas tagı içinde ne resim ne başka bir şey görmemiz zor; ama bir sürü resim animasyon o elemente dahil görülür. Yani canvas içine devamlı görüntü enjekte edilir. Bu görüntü png resmidir. Görüntüyü hareketli kılmak için de saniyede 60 taneye kadar png resmi devamlı enjekte edilince biz onu animasyon gibi görürüz. Peki kaydetme işi nasıl olacak derseniz işte bu nedenle kaydetme işi de png resimleri tek tek kaydederek olacak.

png resimleri kaydetmek için sağ tıkla kaydet olayı yapılabilir. Ancak saniyede 30 png gösteriliyorsa bu 30 farklı png resmini nasıl kaydedersiniz? İşte burada javascript devreye girecek. Chrome’da F12’ye basınca geliştirici araçları açılır. Console sekmesinde gerekli javascript kodunu yollayınca tüm resimleri yakalama şansı var. Kod şöyle olabilir.

$('body').append('<div id="gifgif" style="width:100%; height:200px; z-index:99999999999; background-color: #fff; position:fixed; left:0px; bottom:0px; overflow:scroll"></div>');

	function gifle(){
		var canvas = document.getElementById("canvas");
		var img    = canvas.toDataURL("image/png");
		$('#gifgif').append('<img src="'+img+'" />');
	}

	var gint = setInterval(function(){ gifle(); }, 33);

$('body').append('<div id="gifgif" style="width:100%; height:200px; z-index:99999999999; background-color: #fff; position:fixed; left:0px; bottom:0px; overflow:scroll"></div>');

function gifle(){

var canvas = document.getElementById("canvas");

var img = canvas.toDataURL("image/png");

$('#gifgif').append('<img src="'+img+'" />');

}

var gint = setInterval(function(){ gifle(); }, 33);

Bu kodda <canvas id=”canvas”” … olan elementin görüntüsünü saniyede 33 kere alırız ve sayfada oluşturulan div elementine ekleriz. Bu kod ufak resimler için kullanışlı. Ancak büyük resimler için rahatsız edici görüntü olabilir. Tabii ki siz kendinize göre kodu şekillendirebilirsiniz. Bizim size verebildiğimiz kod resmin data verisi olarak nasıl alınabildiğini göstermekti.

Resimleri tek tek kaydettikten sonra bir program veya uygun internet sitesi vasıtasıyla tüm resimleri gife çevirebilirsiniz.

Ayrıca üstteki kod durdurmadığınız sürece çalışır. Durdurmak için aşağıdaki kodu kullanın.

clearInterval(gint);

1	clearInterval(gint);

canvas animasyonları indir, canvas animasyonları kaydetme, canvas gif indir, canvas gif kaydetme

Canvas Elementindeki Gifleri (Animasyonları) Yakalama, Kaydetme?

Bir yorum yazın Cevabı iptal et