Html kodunu jpg,png resim dosyasına dönüştürme

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.

Yazılım Uzmanı İsmail GÜLTEKİN

 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

Creativecommons.org
Bu çalışmanın içeriği, Creative Commons Atıf 2.5 lisansı koşulları altında kullanılabilir . Bu çalışmanın daha fazla dağıtımı,paylaşımı: ismailgultekin(com)a ve çalışmanın başlığına, Kaynak vererek atıfta bulunulmalıdır.

Telif Hakkı:

Problemi Şikayet Et!
Web Yazılımları

Web Yazılımları

Conference Articles

Conference Articles

Evimde Gör

Mobil Uygulamalar

Özel Yazılımlar

Özel Yazılımlar

Orsam Ortadoğu

Orsam Ortadoğu

Haydi El Ele

Haydi El Ele

Makina Yazılımları

Makina Yazılımları

Soru Sor Whatsapp

Görüş Hata Bildir

Güvenlik Kodunuz:

Yorum Yap

Yorum kodunuz:

0.0692