JsPDF Ders-3 Resim Ekleme
Geri Dön

JsPDF Ders-3 Resim Ekleme

Anasayfa
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>



Anasayfa

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik