HTML5 Canvas Ders-19 Canvası Resim Olarak Kaydetme - toDataURL()
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

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

HTML5 Canvas Ders-19 Canvası Resim Olarak Kaydetme - toDataURL()

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2636)
RAPOR ET
HTML5 canvas serimize devam ediyoruz.Bu derste toDataURL() komutunu anlatacağım.ToDataURL canvastaki bulunan herşeyi tek bir resim haline getirip,resmin urlsini bize sunuyor.Geçen derste gösterdiğimiz resim rengi değiştirmeyide kullanarak bir örnek yaptım.ToDataURL bize verdiği urlyi bir img tagına atadığımızda direk resim gözüküyor.Onu farklı kaydet ile kayıt edebiliyoruz.Ben php ile dinamikleştirdim.Ajax ile urleyi yollayıp resmi otomatik kayıt ediyoruz.

İndir : http://ustaderslik.com/dosya/HTML5%20Canvas%20Ders-19%20Canvası%20Resim%20Olarak%20Kaydetme%20-%20toDataURL().zip

document.getElementById('canvas').toDataURL()

ToDataURL yi direk canvasa uyguluyoruz.

Genel örnek :
index.php
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){

var canvas = document.getElementById('canvas'),
cizim = canvas.getContext('2d');//klasik canvas bağlantısı

var rx =0,
ry =0,//resimin başlama konumu
genislik =600,
yukseklik =400,//resmin boyutları
resimveri,//resmin ilk veriler
veri;//tüm verileri depolayacağımız değişken

var resim = new Image();//resim yaratırıyoruz.
resim.onload = function() {//resim yüklendiğinde
cizim.drawImage(resim,rx,ry,genislik,yukseklik);//resmi ekrana bas
resimveri = cizim.getImageData(rx,ry,genislik,yukseklik);//resmin tüm verilerini al
veri = resimveri .data;//verileri değişkenimize ata
site();//site ismini canvasa yazmak için.
};
resim.src = 'resim.jpg'; //resmin adresini belirliyoruz.

function site(){
cizim.font = 'normal 12pt Times New Roman';cizim.textAlign='left';cizim.fillStyle='#d12c69';cizim.fillText('UstaDerslik.com',20,27); //canvasa ustaderslik.com yazıyoruz.
}

$("#gri").click(function(){//grileştire tıklanırsa
for(var i = 0; i < veri.length; i += 4) {//tüm verileri 4 er 4er al
var sb = (0.34 * veri[i]) + (0.5 * veri[i + 1]) + (0.16 * veri[i + 2]);//oranı bilmiyorum.:) ama verileri kullanarak siyah-beyaz çeviriyor
veri[i] = sb;
veri[i+1] = sb;
veri[i+2] = sb;//veriyi atıyoruz
}
cizim.putImageData(resimveri,rx,ry);//Verileri değiştiriyoruz.
site();
})

$("#kayit").click(function(){//kayita basılırsa
var ck = canvas.toDataURL();//canvası resim urlesi yap.
$("#resim").attr("src",ck)//sayfadaki resmimizin adresine yukarda aldığımız urleyi yapıştır.
$.post("kayit.php",{"resim":ck},function(sonuc){//ajax ile resim adresini kayit.php yolluyoruz.
alert(sonuc)//gelen sonucu ekrana basıyoruz.
})
})

})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.ortala{width:600px;margin:auto;margin-top:25px;}
button{padding:10px;}
</style>
</head>
<body>

<div class="ortala">
<canvas id="canvas" width="600" height="400"></canvas>

<br /><br /><button id="gri">Renkleri Siyah/Beyaz</button><br />
<br /><button id="kayit">Canvası Resim yap / Kaydet</button><br /><br /><br />

<img src="" id="resim" />
</div>

</body>
</html>

kayit.php
<?php 
$resim=$_POST["resim"];//adresi al
$isim=rand();//isim yarat
$yarat=touch($isim.".png");//resim dosyası yarat
if($yarat){//dosya oluştuğunda
$oku=file_get_contents($resim);//resmin içeriğini al
$yaz=file_put_contents($isim.".png",$oku);//oluşturduğumuz dosyaya yaz
if($yaz and $oku){//işlem başarılı ise
echo "Başarıyla resim oluştu";
}else{
echo "Resim oluşturulamadı.";
}
}
?>

Görüntüsü :
http://ustaderslik.com/resim/ders/a7fgfr14s2.png



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