JsPDF derslerimize devam ediyoruz.Bu dersimizde oluşturduğumuz pdf ye
resim eklemeyi göreceğiz.Resim eklemek için kullanacağımız komut
addImage("resim verisi","Tür",x,y,w,h) .Dikkat etmemiz gereken bir nokta var,resim
urlsi değil resim
verisini giriyoruz.Türe resim
png,jpg... hangisiyse belirtiyoruz.Daha sonra konum belirleyip resim boyutunu giriyoruz.
İndir : http://ustaderslik.com/dosya/jspdf-resim.rar
İncele : http://ustaderslik.com/ornek/jspdf-resim/
Resim verisini bazı siteler aracalığı ile oluşturabilirsiniz.Biz bu derste html5 ile kendimiz kaynağını oluşturmayı göreceğiz.Resim verisi
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABI... şu şekilde giden çok uzun bir veridir.Bunu değişkene atayıp direk addimagede kullanabilirsiniz.
Html5 canvas yani tuval özelliği sayesinde url ile resmi çizdirebiliyoruz.Tuvalde bu resmin tüm pixelleri ile oynama yapabiliriz.İster renkleri
ters çevirin,ister
siyah beyaz yapın.Sitede anlattığım html5 canvas derslerinde gösterdim.Html5
http://ustaderslik.com/konu/HTML5_Canvas_Ders-19_Canvası_Resim_Olarak_Kaydetme_-_toDataURL()
toDataIRL() komutu sayesinde,tuvali direk bir resim verisine dönüştürüyor.Bunu direk jsPDF nin
addimage komutunda kullanıp,resim çizdirebiliriz.Önce tuvale çizdirdiğimiz için de renklerle oynama yapıp üstüne yazı veya şekiller çizdirebiliriz.Biraz zahmetli bir yol,eğer çok resim kullanılacaksa direk kaynakları oluşturup değişkenlerde tutmak mantıklı olur.Kaynak verilerinide
http://dataurl.net şu siteden alabilirsiniz.
Html5 komutlarını kısaca örnekte anlattım.Resim ile istediğiniz gibi oynama yapmabilmek için
html5 canvas komutlarını öğrenmeniz gerek.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript">
$(function(){
var pdf = new jsPDF();
var canvas = document.getElementById('canvas'),cizim = canvas.getContext('2d');//İlk değişken ile tuvale erişip 2. değişken ile çizimi başlatıyoruz.
var resim = new Image();//resim objesi oluşturuyoruz.
resim.onload = function(){//resim objesine resim atandıktan sonra yüklediğinde
cizim.drawImage(resim,0,0,175,150);//resmi tuvale çizdiriyoruz.
var url=canvas.toDataURL();//canvası resim verisine dönüştürüyoruz.
yazdir(url);//resim verisini yazdı fonksiyonuna gönderiyoruz.
}
resim.src="resim.png";//resim objesine resmin konumunu giriyoruz.
function yazdir(resim){
pdf.addImage(resim,"PNG",0,0,100,60);
pdf.addImage(resim,"PNG",120,0,75,60);
var yazdir = pdf.output('datauristring');
$('#onizleme').attr("src",yazdir);
}
})
</script>
<style type="text/css">
canvas{display:none;}
</style>
</head>
<body>
<canvas id="canvas" width="175" height="150" ></canvas>
<iframe id="onizleme" type="application/pdf" style="width:100%;height:900px;" frameborder="0"></iframe>
</body>
</html>
UstaDerslik
