Selam olsun tüm kod severlere. Arkadaşlar güzel bi konuya değineceğim faydalı olarak düşündüğüm. Html kodlarını resim formatına jpg,png olarak dönüştüreceğiz.

1) Öncelikli olarak sayfamıza şu jquery kodlarını dahil edelim. Sonrasında Jquer, php ve ajax ile post gönderme işlemlerini ve html div yapısı oluşturup, style css ile şekillendirdikten sonra resim dosyası haline dönüştüreceğiz.

2)  Html kodlarımızı div yapımızı oluşturalım.

	

		

			{ Jquery }
	
	

		KENTSEL DÖNÜŞÜM SENARYO YARIŞMASI
	

		1345 yarışmacı günlük 54 bin oy kullanımı içinde facebook uygulamasını barındırıyor php5 freamwork codeigniter ile yazıldı içinde yarışmacı paneli mevcut.
	

 3) Style css kodlarımızı dahil ederek güzel bir şekillendirelim.

 4) jquery kodumuz ile html #canvas olan div bloğumuzu resim dosyası haline dönüştürelim.

div_content = document.querySelector("#canvas")
				//make it as html5 canvas
				html2canvas(div_content).then(function(canvas) {
					//change the canvas to jpeg image
					data = canvas.toDataURL('image/jpeg');
					
					save_img(data);
				});

 5) Dönüştürdüğüm resim datasını php dosyamıza jquery post ile gönderelim. saveimg.php adında bir dosyamız olsun oraya post edeceğiz

function save_img(data){
			//ajax method.
			$.post('save_img.php', {data: data}, function(res){
				if(res != ''){
					yes = confirm('Dosya yüklendi görmek istermisiniz!');
					if(yes){
						location.href =document.URL+'yuklenenklasor/'+res+'.jpg';
					}
				}
				else{
					alert('Hata Mesajımız');
				}
			});
		}

 6)saveimg.php dosyamıza yazdığım kodları ekleyelim.

$random = rand(100, 1000);//random bir sayı üretiyor
//.jpg veya .png diyebilirsiniz
$savefile = @file_put_contents("yuklenenklasor/$random.jpg", base64_decode(explode(",", $_POST['data'])[1]));
//eğer işlem başarılı ise random resim dosyası adını geri dönelim
if($savefile){
	echo $random;
}

Eğer herhangi bir sorun yaşamanız durumunda yorum yapabilir veya soru sor bölümünden bana ulaşabilirsiniz. Kontrol edelim yüklediğini.

 Ve işte bu kadar. Eğer sizde verdiğim kodları eksiksiz yazdıysanız sorunsuz bir şekilde çalışacak demektir.

 Çalışan Demoyu Görmek için Tıklayın