\u00c7evrimi\u00e7i PDF d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fclerinin gizlilik endi\u015felerini geride b\u0131rak\u0131n! Bu makalede, PDF dosyalar\u0131n\u0131 sunucuya y\u00fcklemeden, tamamen taray\u0131c\u0131n\u0131z i\u00e7inde y\u00fcksek kaliteli g\u00f6r\u00fcnt\u00fclere d\u00f6n\u00fc\u015ft\u00fcrmenin ad\u0131m ad\u0131m yollar\u0131n\u0131 ke\u015ffedeceksiniz. G\u00fcvenli, h\u0131zl\u0131 ve tamamen kontrol\u00fcn\u00fczde bir d\u00f6n\u00fc\u015f\u00fcm deneyimi i\u00e7in okumaya devam edin.<\/p>\n
G\u00fcn\u00fcm\u00fczde dijital belgeler hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline geldi. \u00d6zellikle PDF (Portable Document Format) dosyalar\u0131, belgelerin bi\u00e7imlendirmesini koruma ve kolayca payla\u015f\u0131labilme \u00f6zellikleriyle \u00f6ne \u00e7\u0131k\u0131yor. Ancak bazen bir PDF belgesinin tamam\u0131n\u0131 veya belirli sayfalar\u0131n\u0131 g\u00f6r\u00fcnt\u00fc format\u0131nda (JPEG, PNG vb.) kullanmam\u0131z gerekebilir. \u00d6rne\u011fin, bir sunuma PDF sayfas\u0131n\u0131 eklemek, sosyal medyada bir b\u00f6l\u00fcm\u00fcn\u00fc payla\u015fmak veya sadece daha hafif bir \u00f6nizleme olu\u015fturmak isteyebiliriz. Bu noktada kar\u015f\u0131m\u0131za \u00e7\u0131kan en yayg\u0131n \u00e7\u00f6z\u00fcm, \u00e7evrimi\u00e7i PDF d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc hizmetleri oluyor.<\/p>\n
Ancak bu \u00e7evrimi\u00e7i hizmetlerin \u00f6nemli bir dezavantaj\u0131 var: gizlilik. Dosyalar\u0131n\u0131z\u0131 d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in sunucular\u0131na y\u00fcklemeniz gerekir. Bu durum, hassas veya ki\u015fisel bilgiler i\u00e7eren belgeler i\u00e7in ciddi g\u00fcvenlik ve gizlilik endi\u015feleri yarat\u0131r. Kimin bu dosyalara eri\u015febilece\u011fini, ne kadar s\u00fcreyle sakland\u0131\u011f\u0131n\u0131 veya nas\u0131l i\u015flendi\u011fini bilemezsiniz. \u0130\u015fte tam da bu noktada, PDF’i tamamen taray\u0131c\u0131 i\u00e7inde, yani istemci taraf\u0131nda g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcrme \u00e7\u00f6z\u00fcmleri devreye giriyor. Bu y\u00f6ntem, dosyan\u0131z\u0131n asla cihaz\u0131n\u0131zdan ayr\u0131lmamas\u0131n\u0131 sa\u011flayarak gizlili\u011finizi maksimum d\u00fczeyde korur. Ayr\u0131ca, sunucuya y\u00fckleme ve indirme s\u00fcrelerini ortadan kald\u0131rd\u0131\u011f\u0131 i\u00e7in \u00e7ok daha h\u0131zl\u0131 bir deneyim sunar. \u0130nternet ba\u011flant\u0131s\u0131 olmasa bile d\u00f6n\u00fc\u015f\u00fcm yapabilmeniz, bu yakla\u015f\u0131m\u0131n bir di\u011fer \u00f6nemli avantaj\u0131d\u0131r.<\/p>\n
Taray\u0131c\u0131 i\u00e7i d\u00f6n\u00fc\u015f\u00fcm, sadece gizlilik ve h\u0131z a\u00e7\u0131s\u0131ndan de\u011fil, ayn\u0131 zamanda geli\u015ftiriciler i\u00e7in esneklik a\u00e7\u0131s\u0131ndan da \u00f6nemli faydalar sa\u011flar. Kendi web uygulamalar\u0131n\u0131zda veya projelerinizde, kullan\u0131c\u0131lara sunucu taraf\u0131 ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olmadan PDF i\u015fleme yetene\u011fi sunabilirsiniz. Bu sayede, uygulaman\u0131z\u0131n daha kararl\u0131, \u00f6l\u00e7eklenebilir ve ba\u011f\u0131ms\u0131z olmas\u0131n\u0131 sa\u011flars\u0131n\u0131z. \u00d6zellikle b\u00fcy\u00fck hacimli PDF dosyalar\u0131yla \u00e7al\u0131\u015f\u0131rken, sunucu kaynaklar\u0131n\u0131 t\u00fcketmeden istemci taraf\u0131nda bu i\u015flemleri ger\u00e7ekle\u015ftirmek, maliyet ve performans a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar sunar. Dolay\u0131s\u0131yla, hem kullan\u0131c\u0131lar\u0131n gizlili\u011fini d\u00fc\u015f\u00fcnen hem de performans odakl\u0131 \u00e7\u00f6z\u00fcmler arayan herkes i\u00e7in taray\u0131c\u0131 i\u00e7i PDF’ten g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015f\u00fcm, olduk\u00e7a cazip bir alternatiftir.<\/p>\n
Taray\u0131c\u0131da PDF’ten g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015f\u00fcm\u00fcn arkas\u0131ndaki temel teknolojileri anlamak, bu s\u00fcrecin nas\u0131l i\u015fledi\u011fini kavramak i\u00e7in kritik \u00f6neme sahiptir. Bu d\u00f6n\u00fc\u015f\u00fcm, genellikle iki anahtar teknolojiye dayan\u0131r: PDF.js k\u00fct\u00fcphanesi ve HTML5 Canvas API’si. Bu iki bile\u015fen, PDF belgesinin karma\u015f\u0131k yap\u0131s\u0131n\u0131 \u00e7\u00f6z\u00fcmleyip taray\u0131c\u0131da g\u00f6rsel bir \u00e7\u0131kt\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in birlikte \u00e7al\u0131\u015f\u0131r.<\/p>\n
PDF.js, Mozilla taraf\u0131ndan geli\u015ftirilen a\u00e7\u0131k kaynakl\u0131 bir JavaScript k\u00fct\u00fcphanesidir. Amac\u0131, PDF belgelerini web standartlar\u0131n\u0131 kullanarak (yani HTML5 Canvas arac\u0131l\u0131\u011f\u0131yla) taray\u0131c\u0131da g\u00f6r\u00fcnt\u00fclemektir. Bu k\u00fct\u00fcphane, PDF dosyas\u0131n\u0131n ikili (binary) verilerini ayr\u0131\u015ft\u0131r\u0131r, i\u00e7indeki metin, grafik, resim ve di\u011fer \u00f6\u011feleri yorumlar ve bunlar\u0131 taray\u0131c\u0131n\u0131n anlayabilece\u011fi bir formata d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. PDF.js’in en b\u00fcy\u00fck avantaj\u0131, sunucu taraf\u0131nda herhangi bir i\u015fleme gerek kalmadan, tamamen istemci taraf\u0131nda \u00e7al\u0131\u015fabilmesidir. Bu sayede, kullan\u0131c\u0131lar bir PDF dosyas\u0131n\u0131 y\u00fcklediklerinde, dosya asla sunucuya g\u00f6nderilmez; t\u00fcm i\u015flemler kendi cihazlar\u0131nda ger\u00e7ekle\u015fir. Bu, \u00f6zellikle gizlilik ve g\u00fcvenlik a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. K\u00fct\u00fcphane, PDF’in her bir sayfas\u0131n\u0131 ayr\u0131 ayr\u0131 i\u015fleyebilir ve bu sayfalar\u0131n i\u00e7eri\u011fini Canvas elementine \u00e7izmek i\u00e7in gerekli verileri sa\u011flar.<\/p>\n
HTML5 Canvas (tuval) API’si, JavaScript kullanarak do\u011frudan web sayfas\u0131 \u00fczerinde grafikler \u00e7izmenizi sa\u011flayan bir HTML elementidir. Bu, dikd\u00f6rtgenler, daireler, metinler, resimler ve daha karma\u015f\u0131k \u015fekiller gibi 2D grafikler olu\u015fturmak i\u00e7in ideal bir ara\u00e7t\u0131r. PDF.js, ayr\u0131\u015ft\u0131rd\u0131\u011f\u0131 PDF i\u00e7eri\u011fini do\u011frudan bu Canvas elementinin \u00fczerine \u00e7izer. Her bir PDF sayfas\u0131, ba\u011f\u0131ms\u0131z bir Canvas elementine \u00e7izilebilir. Canvas \u00fczerine \u00e7izilen i\u00e7erik, piksel tabanl\u0131 bir g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr ve bu da bize d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemini tamamlamak i\u00e7in gereken son ad\u0131m\u0131 sa\u011flar. Canvas API’si, \u00e7izilen i\u00e7eri\u011fi \u00e7e\u015fitli g\u00f6r\u00fcnt\u00fc formatlar\u0131nda (JPEG, PNG, WebP gibi) d\u0131\u015fa aktarmak i\u00e7in Bu temel kavramlar\u0131n \u00f6tesinde, taray\u0131c\u0131 i\u00e7i d\u00f6n\u00fc\u015f\u00fcm\u00fcn baz\u0131 zorluklar\u0131 da vard\u0131r. B\u00fcy\u00fck PDF dosyalar\u0131 veya \u00e7ok say\u0131da sayfa i\u00e7eren belgeler, taray\u0131c\u0131n\u0131n belle\u011fini ve i\u015flem g\u00fcc\u00fcn\u00fc zorlayabilir. Bu, performans d\u00fc\u015f\u00fc\u015flerine veya taray\u0131c\u0131n\u0131n yan\u0131t vermemesine neden olabilir. Bu t\u00fcr durumlar i\u00e7in Web Workers gibi geli\u015fmi\u015f JavaScript API’leri devreye girer. Web Workers, ana taray\u0131c\u0131 i\u015f par\u00e7ac\u0131\u011f\u0131ndan (main thread) ayr\u0131 bir arka plan i\u015f par\u00e7ac\u0131\u011f\u0131nda yo\u011fun hesaplama gerektiren i\u015flemleri \u00e7al\u0131\u015ft\u0131rmaya olanak tan\u0131r. Bu sayede, PDF i\u015fleme gibi zaman al\u0131c\u0131 g\u00f6revler taray\u0131c\u0131n\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc dondurmadan arka planda y\u00fcr\u00fct\u00fclebilir. Bu optimizasyonlar, daha ak\u0131c\u0131 ve kullan\u0131c\u0131 dostu bir deneyim sa\u011flamak i\u00e7in hayati \u00f6neme sahiptir. T\u00fcm bu teknolojilerin bir araya gelmesiyle, PDF’ten g\u00f6r\u00fcnt\u00fcye taray\u0131c\u0131 i\u00e7i d\u00f6n\u00fc\u015f\u00fcm, hem teknik olarak m\u00fcmk\u00fcn hem de kullan\u0131c\u0131lar i\u00e7in olduk\u00e7a faydal\u0131 bir \u00e7\u00f6z\u00fcm haline gelmektedir.<\/p>\n Taray\u0131c\u0131da PDF’i g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcrme s\u00fcrecinin kalbinde, daha \u00f6nce de bahsetti\u011fimiz gibi, Mozilla’n\u0131n g\u00fc\u00e7l\u00fc PDF.js<\/a> k\u00fct\u00fcphanesi yer almaktad\u0131r. Bu k\u00fct\u00fcphane, PDF dosyalar\u0131n\u0131 ayr\u0131\u015ft\u0131rmak ve i\u00e7eri\u011fini HTML5 Canvas \u00fczerine \u00e7izmek i\u00e7in gerekli t\u00fcm fonksiyonelli\u011fi sa\u011flar. D\u00f6n\u00fc\u015f\u00fcm i\u015flemini ba\u015flatmak i\u00e7in \u00f6ncelikle PDF.js’i projenize entegre etmeniz gerekmektedir. Bu entegrasyonu yapman\u0131n birka\u00e7 yolu bulunmaktad\u0131r, ancak en yayg\u0131n ve pratik olanlar\u0131 CDN (Content Delivery Network) \u00fczerinden veya k\u00fct\u00fcphaneyi do\u011frudan projenize indirerek kullanmakt\u0131r.<\/p>\n PDF.js’i kullanmaya ba\u015flamak i\u00e7in, HTML dosyan\u0131za iki ana JavaScript dosyas\u0131n\u0131 dahil etmeniz gerekir: 1. CDN \u00dczerinden Entegrasyon:<\/strong><\/p>\n En h\u0131zl\u0131 ve en kolay y\u00f6ntemlerden biri, PDF.js’i bir CDN \u00fczerinden projenize dahil etmektir. Bu y\u00f6ntem, k\u00fct\u00fcphaneyi sunucunuza indirmenize gerek kalmadan, do\u011frudan internetten y\u00fcklemenizi sa\u011flar. Genellikle cdnjs<\/a> gibi pop\u00fcler CDN hizmetleri arac\u0131l\u0131\u011f\u0131yla sa\u011flan\u0131r. HTML dosyan\u0131z\u0131n Yukar\u0131daki \u00f6rnekte, 2. K\u00fct\u00fcphaneyi \u0130ndirerek Entegrasyon:<\/strong><\/p>\n E\u011fer uygulaman\u0131z\u0131n \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 istiyorsan\u0131z veya CDN ba\u011f\u0131ml\u0131l\u0131\u011f\u0131ndan ka\u00e7\u0131nmak istiyorsan\u0131z, PDF.js k\u00fct\u00fcphanesini resmi GitHub sayfas\u0131ndan<\/a> indirip projenize dahil edebilirsiniz. \u0130ndirdi\u011finiz paketten \u015eimdiye kadar, taray\u0131c\u0131da PDF’ten g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015f\u00fcm\u00fcn teorik temellerini ve PDF.js k\u00fct\u00fcphanesini nas\u0131l entegre edece\u011fimizi \u00f6\u011frendik. Art\u0131k pratik k\u0131sma ge\u00e7erek, kullan\u0131c\u0131dan bir PDF dosyas\u0131 al\u0131p, bu dosyay\u0131 PDF.js ile nas\u0131l i\u015fleyece\u011fimizi ad\u0131m ad\u0131m inceleyelim. Bu b\u00f6l\u00fcm, bir HTML sayfas\u0131 olu\u015fturmaktan, JavaScript ile dosya okumaya ve PDF belgesini y\u00fcklemeye kadar t\u00fcm s\u00fcreci kapsayacakt\u0131r.<\/p>\n \u00d6ncelikle, kullan\u0131c\u0131n\u0131n PDF dosyas\u0131n\u0131 se\u00e7ebilece\u011fi bir dosya y\u00fckleme alan\u0131 ve d\u00f6n\u00fc\u015ft\u00fcr\u00fclen g\u00f6r\u00fcnt\u00fclerin g\u00f6sterilece\u011fi bir konteyner elementine ihtiyac\u0131m\u0131z var. Temel HTML yap\u0131m\u0131z a\u015fa\u011f\u0131daki gibi olabilir:<\/p>\n Bu HTML yap\u0131s\u0131nda, bir \u015eimdi s\u0131ra geldi JavaScript koduna. Kullan\u0131c\u0131 bir dosya se\u00e7ti\u011finde ve d\u00f6n\u00fc\u015ft\u00fcr butonuna t\u0131klad\u0131\u011f\u0131nda bu dosyay\u0131 okuyup PDF.js’e g\u00f6ndermemiz gerekiyor. Bu i\u015flem i\u00e7in Bu kod blo\u011funda, \u00d6nceki b\u00f6l\u00fcmde, bir PDF dosyas\u0131n\u0131 nas\u0131l y\u00fckleyece\u011fimizi ve PDF.js k\u00fct\u00fcphanesi ile nas\u0131l bir PDF belgesi nesnesi elde edece\u011fimizi g\u00f6rd\u00fck. \u015eimdi ise bu belgenin her bir sayfas\u0131n\u0131 al\u0131p, bir HTML5 Canvas elementi \u00fczerine nas\u0131l \u00e7izece\u011fimizi ve son olarak bu Canvas i\u00e7eri\u011fini bir g\u00f6r\u00fcnt\u00fc dosyas\u0131na (JPEG, PNG vb.) nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrece\u011fimizi detayl\u0131ca inceleyece\u011fiz. Bu ad\u0131m, taray\u0131c\u0131 i\u00e7i PDF’ten g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015f\u00fcm s\u00fcrecinin en kritik ve g\u00f6rsel k\u0131sm\u0131n\u0131 olu\u015fturur.<\/p>\n Bir PDF belgesi genellikle birden fazla sayfadan olu\u015fur. PDF.js k\u00fct\u00fcphanesi, Burada, Her PDF sayfas\u0131 i\u00e7in yeni bir PDF sayfas\u0131n\u0131n i\u00e7eri\u011fini Canvas \u00fczerine \u00e7izmek i\u00e7in Canvas \u00fczerinde \u00e7izilmi\u015f olan i\u00e7eri\u011fi bir g\u00f6r\u00fcnt\u00fc dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in PDF'i taray\u0131c\u0131da g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcrme temel ad\u0131mlar\u0131n\u0131 anlad\u0131k, ancak \u00f6zellikle b\u00fcy\u00fck dosyalar veya \u00e7ok say\u0131da sayfa i\u00e7eren PDF'lerle \u00e7al\u0131\u015f\u0131rken performans ve kullan\u0131c\u0131 deneyimi sorunlar\u0131 ortaya \u00e7\u0131kabilir. Bu b\u00f6l\u00fcmde, bu sorunlar\u0131 a\u015fmak ve uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in kullanabilece\u011finiz geli\u015fmi\u015f teknikleri ve optimizasyonlar\u0131 inceleyece\u011fiz.<\/p>\n JavaScript, varsay\u0131lan olarak tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) bir dildir. Bu, yo\u011fun hesaplama gerektiren i\u015flemlerin (\u00f6rne\u011fin, PDF'i ayr\u0131\u015ft\u0131rma ve her sayfay\u0131 Canvas'a \u00e7izme) taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke edebilece\u011fi ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn donmas\u0131na neden olabilece\u011fi anlam\u0131na gelir. Bu durumu \u00f6nlemek i\u00e7in Web Workers (Web \u0130\u015f\u00e7ileri) kullanabiliriz. Web Workers, JavaScript kodunu ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ayr\u0131, arka plan bir i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. PDF.js k\u00fct\u00fcphanesi zaten bu yap\u0131y\u0131 destekler ve Daha \u00f6nce de belirtti\u011fimiz gibi, Her bir PDF sayfas\u0131 i\u00e7in bir Canvas elementi olu\u015fturmak ve bunlar\u0131 g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcrmek, \u00f6zellikle \u00e7ok say\u0131da sayfa oldu\u011funda \u00f6nemli miktarda bellek t\u00fcketebilir. Taray\u0131c\u0131n\u0131n belle\u011fini verimli kullanmak i\u00e7in a\u015fa\u011f\u0131daki stratejileri d\u00fc\u015f\u00fcnebilirsiniz:<\/p>\n Kullan\u0131m senaryonuza g\u00f6re en uygun format\u0131 ve kalite ayar\u0131n\u0131 se\u00e7mek, hem dosya boyutunu hem de g\u00f6rsel kaliteyi optimize etmenize yard\u0131mc\u0131 olacakt\u0131r. \u00d6rne\u011fin, PDF'ler genellikle metin ve vekt\u00f6r grafikler i\u00e7erdi\u011finden, PNG genellikle daha iyi bir se\u00e7im olabilirken, foto\u011fraf a\u011f\u0131rl\u0131kl\u0131 PDF'lerde JPEG daha avantajl\u0131d\u0131r.<\/p>\n B\u00fcy\u00fck PDF dosyalar\u0131n\u0131n i\u015flenmesi zaman alabilir. Kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131n dondu\u011funu d\u00fc\u015f\u00fcnmesini engellemek i\u00e7in bir ilerleme g\u00f6stergesi (progress bar) veya basit bir \"y\u00fckleniyor\" mesaj\u0131 g\u00f6stermek \u00f6nemlidir. PDF.js, Bu optimizasyonlar ve geli\u015fmi\u015f teknikler, taray\u0131c\u0131 i\u00e7i PDF'ten g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc uygulaman\u0131z\u0131 daha sa\u011flam, h\u0131zl\u0131 ve kullan\u0131c\u0131 dostu hale getirecektir. Her zaman uygulaman\u0131z\u0131n performans\u0131n\u0131 farkl\u0131 boyutlardaki PDF dosyalar\u0131yla test etmeyi ve darbo\u011fazlar\u0131 belirleyip gidermeyi unutmay\u0131n.<\/p>\n Taray\u0131c\u0131da PDF'i g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcrme yetene\u011fi, sadece teknik bir g\u00f6steriden ibaret de\u011fildir; \u00e7e\u015fitli ger\u00e7ek d\u00fcnya senaryolar\u0131nda ve web uygulamalar\u0131nda pratik ve de\u011ferli kullan\u0131m alanlar\u0131 bulmaktad\u0131r. Bu y\u00f6ntem, \u00f6zellikle gizlilik, h\u0131z ve kullan\u0131c\u0131 deneyiminin \u00f6n planda oldu\u011fu durumlarda vazge\u00e7ilmez bir ara\u00e7 haline gelir. \u0130\u015fte bu teknolojinin baz\u0131 \u00f6nemli kullan\u0131m alanlar\u0131:<\/p>\n Finans, sa\u011fl\u0131k veya hukuk gibi hassas verilerin i\u015flendi\u011fi sekt\u00f6rlerde, belgelerin gizlili\u011fi hayati \u00f6neme sahiptir. \u00c7evrimi\u00e7i d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fcler bu t\u00fcr belgeler i\u00e7in risk olu\u015ftururken, taray\u0131c\u0131 i\u00e7i PDF'ten g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fcler, kullan\u0131c\u0131lar\u0131n belgelerini sunucuya y\u00fcklemeden g\u00fcvenli bir \u015fekilde \u00f6nizlemesini veya g\u00f6r\u00fcnt\u00fclemesini sa\u011flar. \u00d6rne\u011fin, bir e-devlet portal\u0131nda veya bankac\u0131l\u0131k uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n kendi cihazlar\u0131nda bir belgeyi a\u00e7\u0131p incelemesi, sunucuya g\u00f6nderilmeden yap\u0131ld\u0131\u011f\u0131nda g\u00fcvenli\u011fi art\u0131r\u0131r. Bu, \u00f6zellikle PDF'leri k\u00fc\u00e7\u00fck resim \u00f6nizlemeleri (thumbnails) olarak g\u00f6stermek i\u00e7in idealdir, \u00e7\u00fcnk\u00fc bu k\u00fc\u00e7\u00fck resimler do\u011frudan taray\u0131c\u0131da olu\u015fturulur ve ana belgenin i\u00e7eri\u011fi asla d\u0131\u015far\u0131 \u00e7\u0131kmaz.<\/p>\n \u0130nternet ba\u011flant\u0131s\u0131n\u0131n k\u0131s\u0131tl\u0131 veya hi\u00e7 olmad\u0131\u011f\u0131 durumlarda \u00e7al\u0131\u015fan web uygulamalar\u0131 (PWA'lar - Progressive Web Apps), taray\u0131c\u0131 i\u00e7i PDF d\u00f6n\u00fc\u015f\u00fcm\u00fcnden b\u00fcy\u00fck fayda sa\u011flar. \u00d6rne\u011fin, bir saha \u00e7al\u0131\u015fan\u0131, \u00e7evrimd\u0131\u015f\u0131 modda \u00e7al\u0131\u015f\u0131rken bir PDF k\u0131lavuzunu veya raporunu g\u00f6r\u00fcnt\u00fclere d\u00f6n\u00fc\u015ft\u00fcr\u00fcp h\u0131zl\u0131ca g\u00f6zden ge\u00e7irebilir. T\u00fcm i\u015flem yerel olarak ger\u00e7ekle\u015fti\u011fi i\u00e7in, internet ba\u011flant\u0131s\u0131 gereksinimi ortadan kalkar. Bu, \u00f6zellikle mobil cihazlarda veya uzak konumlarda \u00e7al\u0131\u015fan kullan\u0131c\u0131lar i\u00e7in kesintisiz bir deneyim sunar.<\/p>\n Web tabanl\u0131 tasar\u0131m veya d\u00fczenleme ara\u00e7lar\u0131, PDF sayfalar\u0131n\u0131 g\u00f6r\u00fcnt\u00fc olarak i\u00e7e aktarmak isteyebilir. Bir kullan\u0131c\u0131n\u0131n PDF belgesinden belirli bir sayfay\u0131 al\u0131p, bir tasar\u0131m arac\u0131 i\u00e7inde bir resim katman\u0131 olarak kullanmas\u0131 gerekebilir. Taray\u0131c\u0131 i\u00e7i d\u00f6n\u00fc\u015f\u00fcm, bu s\u00fcreci sorunsuz ve h\u0131zl\u0131 bir \u015fekilde entegre etmeyi sa\u011flar. Kullan\u0131c\u0131, PDF'i do\u011frudan taray\u0131c\u0131s\u0131nda g\u00f6r\u00fcnt\u00fclere d\u00f6n\u00fc\u015ft\u00fcrebilir ve ard\u0131ndan bu g\u00f6r\u00fcnt\u00fcleri s\u00fcr\u00fckle-b\u0131rak (drag-and-drop) ile d\u00fczenleme alan\u0131na ekleyebilir. Bu, \u00f6zellikle bro\u015f\u00fcrler, sunumlar veya sosyal medya grafikleri olu\u015fturan uygulamalar i\u00e7in g\u00fc\u00e7l\u00fc bir \u00f6zelliktir.<\/p>\n Modern e-kitap okuyucular veya belge y\u00f6netim sistemleri, PDF dosyalar\u0131n\u0131 daha h\u0131zl\u0131 y\u00fcklemek veya belirli bir sayfa aral\u0131\u011f\u0131n\u0131 \u00f6nbelle\u011fe almak i\u00e7in g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcrme yetene\u011fini kullanabilir. PDF'in her sayfas\u0131n\u0131 bir g\u00f6r\u00fcnt\u00fc olarak \u00f6nceden i\u015flemek, kullan\u0131c\u0131lar\u0131n sayfalar aras\u0131nda daha ak\u0131c\u0131 bir \u015fekilde ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, PDF'leri daha hafif g\u00f6r\u00fcnt\u00fc formatlar\u0131na d\u00f6n\u00fc\u015ft\u00fcrerek, mobil cihazlarda veya d\u00fc\u015f\u00fck bant geni\u015fli\u011fine sahip ba\u011flant\u0131larda daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri elde edilebilir. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k PDF'leri i\u015flerken kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n Kurumsal veya ki\u015fisel kullan\u0131mlarda, dosyalar\u0131n sunucuya g\u00f6nderilmesinin istenmedi\u011fi durumlar mevcuttur. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n ki\u015fisel verilerini i\u00e7eren bir PDF formunu doldurduktan sonra, bu formun bir kopyas\u0131n\u0131 g\u00f6r\u00fcnt\u00fc olarak kaydetmesi gerekebilir. Taray\u0131c\u0131 i\u00e7i d\u00f6n\u00fc\u015f\u00fcm, bu i\u015flemi tamamen kullan\u0131c\u0131n\u0131n kontrol\u00fcnde tutar, hassas verilerin potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131na maruz kalmas\u0131n\u0131 engeller. Bu, veri koruma d\u00fczenlemeleri (KVKK, GDPR vb.) a\u00e7\u0131s\u0131ndan da \u00f6nemli bir avantajd\u0131r.<\/p>\n Bu senaryolar, taray\u0131c\u0131da PDF'i g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015ft\u00fcrme teknolojisinin ne kadar \u00e7ok y\u00f6nl\u00fc ve faydal\u0131 olabilece\u011fini g\u00f6stermektedir. Geli\u015ftiriciler, bu yetene\u011fi kendi web uygulamalar\u0131na entegre ederek kullan\u0131c\u0131lara daha g\u00fcvenli, h\u0131zl\u0131 ve zengin bir deneyim sunabilirler.<\/p>\n Taray\u0131c\u0131 i\u00e7i d\u00f6n\u00fc\u015f\u00fcm, dosyan\u0131z\u0131n asla sunucuya y\u00fcklenmemesini sa\u011flayarak maksimum gizlilik ve g\u00fcvenlik sunar. Ayr\u0131ca, sunucuya y\u00fckleme ve indirme s\u00fcreleri olmad\u0131\u011f\u0131 i\u00e7in \u00e7ok daha h\u0131zl\u0131d\u0131r ve internet ba\u011flant\u0131s\u0131 olmadan da \u00e7al\u0131\u015fabilir. Bu, hassas belgelerle \u00e7al\u0131\u015fan veya h\u0131zl\u0131 sonu\u00e7lar bekleyen kullan\u0131c\u0131lar i\u00e7in idealdir.<\/p>\n \u00c7o\u011fu standart PDF dosyas\u0131 sorunsuz bir \u015fekilde d\u00f6n\u00fc\u015f\u00fcr. Ancak, baz\u0131 \u00f6zel durumlar (\u00f6rne\u011fin, \u015fifreli PDF'ler, \u00e7ok karma\u015f\u0131k veya bozuk PDF'ler, \u00f6zel fontlar veya 3D i\u00e7erik i\u00e7eren PDF'ler) d\u00f6n\u00fc\u015f\u00fcm s\u0131ras\u0131nda sorunlara neden olabilir. PDF.js k\u00fct\u00fcphanesi \u015fifreli PDF'leri de destekler, ancak do\u011fru \u015fifrenin girilmesi gerekir. D\u00f6n\u00fc\u015f\u00fcm kalitesi, PDF'in orijinal yap\u0131s\u0131na ve kullan\u0131lan \u00f6l\u00e7eklendirme fakt\u00f6r\u00fcne ba\u011fl\u0131d\u0131r.<\/p>\n B\u00fcy\u00fck PDF dosyalar\u0131 veya \u00e7ok say\u0131da sayfa i\u00e7eren belgeler i\u00e7in performans sorunlar\u0131 ya\u015fanabilir. Bu sorunlar\u0131 a\u015fmak i\u00e7in Web Workers kullanarak PDF i\u015fleme g\u00f6revlerini ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ay\u0131rabilir, Canvas elementlerini yeniden kullanabilir, bellek y\u00f6netimine dikkat edebilir ve sadece g\u00f6r\u00fcnt\u00fclenen sayfalar\u0131 d\u00f6n\u00fc\u015ft\u00fcrerek kaynak t\u00fcketimini optimize edebilirsiniz. Ayr\u0131ca, kullan\u0131c\u0131ya bir ilerleme g\u00f6stergesi sunmak, alg\u0131lanan performans\u0131 art\u0131r\u0131r.<\/p>\n Evet, d\u00f6n\u00fc\u015ft\u00fcr\u00fclen g\u00f6r\u00fcnt\u00fcleri otomatik olarak indirmek m\u00fcmk\u00fcnd\u00fcr. Her bir Canvas elementini PDF.js ve HTML5 Canvas API'si, modern web standartlar\u0131d\u0131r ve g\u00fcn\u00fcm\u00fczdeki t\u00fcm pop\u00fcler taray\u0131c\u0131lar (Chrome, Firefox, Safari, Edge, Opera) taraf\u0131ndan geni\u015f \u00e7apl\u0131 olarak desteklenmektedir. Eski taray\u0131c\u0131 s\u00fcr\u00fcmleri i\u00e7in baz\u0131 uyumluluk sorunlar\u0131 ya\u015fanabilir, ancak genel olarak geni\u015f bir taray\u0131c\u0131 yelpazesinde sorunsuz \u00e7al\u0131\u015f\u0131r.<\/p>\n Bu makalede, PDF dosyalar\u0131n\u0131 sunucuya y\u00fcklemeden, tamamen taray\u0131c\u0131n\u0131z i\u00e7inde g\u00f6r\u00fcnt\u00fclere d\u00f6n\u00fc\u015ft\u00fcrmenin kapsaml\u0131 yollar\u0131n\u0131 inceledik. PDF.js k\u00fct\u00fcphanesi ve HTML5 Canvas API'sinin g\u00fcc\u00fcn\u00fc kullanarak, gizlili\u011finizi koruyan, h\u0131zl\u0131 ve etkili bir d\u00f6n\u00fc\u015f\u00fcm s\u00fcreci olu\u015fturabilece\u011fimizi g\u00f6rd\u00fck. Temel entegrasyondan, dosya okumaya, sayfa i\u015flemeye ve Canvas \u00fczerine \u00e7izime kadar ad\u0131m ad\u0131m ilerledik. Ayr\u0131ca, Web Workers ile performans\u0131 art\u0131rma, bellek y\u00f6netimi ve farkl\u0131 g\u00f6r\u00fcnt\u00fc formatlar\u0131 gibi geli\u015fmi\u015f tekniklere de de\u011finerek uygulaman\u0131z\u0131 daha sa\u011flam hale getirme yollar\u0131n\u0131 ke\u015ffettik. Ger\u00e7ek d\u00fcnya senaryolar\u0131, bu teknolojinin belge \u00f6nizlemeden \u00e7evrimd\u0131\u015f\u0131 uygulamalara kadar ne kadar \u00e7e\u015fitli alanlarda kullan\u0131labilece\u011fini ortaya koydu.<\/p>\n Taray\u0131c\u0131 i\u00e7i PDF'ten g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015f\u00fcm, sadece bir teknik yetenek de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 g\u00fcvenli\u011fini ve gizlili\u011fini \u00f6n planda tutan modern web geli\u015ftirme yakla\u015f\u0131m\u0131n\u0131n bir yans\u0131mas\u0131d\u0131r. Geli\u015ftiriciler olarak, bu t\u00fcr \u00e7\u00f6z\u00fcmleri benimseyerek kullan\u0131c\u0131lar\u0131m\u0131za daha iyi, daha g\u00fcvenli ve daha h\u0131zl\u0131 deneyimler sunabiliriz. Unutmay\u0131n, dijital d\u00fcnyada verilerinizin kontrol\u00fc sizin elinizde olmal\u0131d\u0131r ve bu teknoloji tam da bunu sa\u011flamak i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r.<\/p>\n #Teknoloji #WebGeli\u015ftirme #JavaScript #PDFtoImage #Taray\u0131c\u0131\u0130\u00e7iD\u00f6n\u00fc\u015f\u00fcm<\/p>\ntoDataURL()<\/code> veya toBlob()<\/code> gibi y\u00f6ntemler sunar. Bu y\u00f6ntemler sayesinde, Canvas \u00fczerinde bulunan piksel verisi kolayca bir g\u00f6r\u00fcnt\u00fc dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fclerek kullan\u0131c\u0131ya sunulabilir veya indirilebilir hale gelir. Bu iki teknolojinin birle\u015fimi, PDF’in karma\u015f\u0131k yap\u0131s\u0131n\u0131 taray\u0131c\u0131da g\u00f6rsel bir \u00e7\u0131kt\u0131ya \u00e7evirmenin g\u00fc\u00e7l\u00fc ve verimli bir yolunu sunar.<\/p>\nGerekli Ara\u00e7lar ve K\u00fct\u00fcphaneler: PDF.js’e Yak\u0131ndan Bak\u0131\u015f<\/h3>\n
PDF.js K\u00fct\u00fcphanesini Projenize Nas\u0131l Entegre Edersiniz?<\/h4>\n
pdf.js<\/code> ve pdf.worker.js<\/code>. pdf.js<\/code>, k\u00fct\u00fcphanenin ana API’sini ve kullan\u0131c\u0131 aray\u00fcz\u00fc ile etkile\u015fime giren kodlar\u0131 i\u00e7erirken, pdf.worker.js<\/code> ise PDF ayr\u0131\u015ft\u0131rma gibi yo\u011fun hesaplama gerektiren i\u015flemleri ayr\u0131 bir Web Worker’da \u00e7al\u0131\u015ft\u0131rarak taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n kilitlenmesini engeller. Bu ayr\u0131m, \u00f6zellikle b\u00fcy\u00fck PDF dosyalar\u0131yla \u00e7al\u0131\u015f\u0131rken uygulaman\u0131z\u0131n performans\u0131n\u0131 ve yan\u0131t verme yetene\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n<head><\/code> veya <body><\/code> etiketinin sonuna a\u015fa\u011f\u0131daki gibi script etiketlerini ekleyebilirsiniz:<\/p>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/4.0.379\/pdf.min.mjs\" type=\"module\"><\/script>\n<script type=\"module\">\n import { getDocument, GlobalWorkerOptions } from 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/4.0.379\/pdf.worker.min.mjs';\n GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/4.0.379\/pdf.worker.min.mjs';\n window.pdfjsLib = { getDocument, GlobalWorkerOptions }; \/\/ Global eri\u015fim i\u00e7in\n<\/script>\n <\/code><\/pre>\n<\/p><\/div>\npdf.min.mjs<\/code> ana k\u00fct\u00fcphaneyi, pdf.worker.min.mjs<\/code> ise Web Worker’\u0131 temsil eder. GlobalWorkerOptions.workerSrc<\/code> ayar\u0131, Web Worker dosyas\u0131n\u0131n yolunu PDF.js’e bildirmek i\u00e7in kritik \u00f6neme sahiptir. Bu ayar yap\u0131lmad\u0131\u011f\u0131nda, PDF.js Web Worker’\u0131 bulamayabilir ve performans sorunlar\u0131 ya\u015fayabilirsiniz. Ayr\u0131ca, mod\u00fcl olarak i\u00e7e aktar\u0131lan k\u00fct\u00fcphaneyi global bir de\u011fi\u015fkene atamak, daha sonraki JavaScript kodunuzda kolayca eri\u015fim sa\u011flaman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\nbuild<\/code> klas\u00f6r\u00fcn\u00fc projenize kopyalay\u0131n. Ard\u0131ndan, HTML dosyan\u0131zda bu yerel dosyalar\u0131 referans g\u00f6sterin:<\/p>\n\n<script src=\"path\/to\/pdfjs\/build\/pdf.min.mjs\" type=\"module\"><\/script>\n<script type=\"module\">\n import { getDocument, GlobalWorkerOptions } from 'path\/to\/pdfjs\/build\/pdf.worker.min.mjs';\n GlobalWorkerOptions.workerSrc = 'path\/to\/pdfjs\/build\/pdf.worker.min.mjs';\n window.pdfjsLib = { getDocument, GlobalWorkerOptions }; \/\/ Global eri\u015fim i\u00e7in\n<\/script>\n <\/code><\/pre>\n<\/p><\/div>\npath\/to\/pdfjs\/build\/<\/code> k\u0131sm\u0131n\u0131 kendi projenizdeki PDF.js dosyalar\u0131n\u0131n ger\u00e7ek yolu ile de\u011fi\u015ftirmeyi unutmay\u0131n. Bu y\u00f6ntem, uygulaman\u0131z\u0131n tamamen kendi sunucunuzdan veya yerel dosya sisteminizden \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r, bu da da\u011f\u0131t\u0131m ve \u00e7evrimd\u0131\u015f\u0131 yetenekler a\u00e7\u0131s\u0131ndan avantaj sa\u011flar. Her iki entegrasyon y\u00f6nteminde de, GlobalWorkerOptions.workerSrc<\/code> ayar\u0131n\u0131n do\u011fru yap\u0131ld\u0131\u011f\u0131ndan emin olmak, PDF.js’in verimli \u00e7al\u0131\u015fmas\u0131 i\u00e7in temel bir ad\u0131md\u0131r. Bu sayede, PDF ayr\u0131\u015ft\u0131rma ve render i\u015flemleri ayr\u0131 bir i\u015f par\u00e7ac\u0131\u011f\u0131nda y\u00fcr\u00fct\u00fclerek taray\u0131c\u0131n\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn donmas\u0131 engellenir ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunulur.<\/p>\nAd\u0131m Ad\u0131m Uygulama: PDF Dosyas\u0131n\u0131 Y\u00fckleme ve Sayfalar\u0131 \u0130\u015fleme<\/h3>\n
1. HTML Yap\u0131s\u0131n\u0131 Olu\u015fturma: Dosya Se\u00e7ici ve G\u00f6r\u00fcnt\u00fc Konteyneri<\/h4>\n
<input type=\"file\"><\/code> elementi ile kullan\u0131c\u0131dan PDF dosyas\u0131 al\u0131yoruz. accept=\".pdf\"<\/code> \u00f6zniteli\u011fi, sadece PDF dosyalar\u0131n\u0131n se\u00e7ilebilmesini sa\u011flar. Bir “D\u00f6n\u00fc\u015ft\u00fcr” butonu ve d\u00f6n\u00fc\u015ft\u00fcr\u00fclen g\u00f6r\u00fcnt\u00fclerin yerle\u015ftirilece\u011fi bo\u015f bir <div id=\"imageContainer\"><\/code> ile bir de y\u00fckleme g\u00f6stergesi (#loading<\/code>) ekledik.<\/p>\n2. JavaScript ile Dosya Okuma ve PDF Belgesini Y\u00fckleme<\/h4>\n
FileReader<\/code> API’sini kullanaca\u011f\u0131z.<\/p>\n\n document.addEventListener('DOMContentLoaded', () => {\n const pdfFileInput = document.getElementById('pdfFile');\n const convertButton = document.getElementById('convertButton');\n const imageContainer = document.getElementById('imageContainer');\n const loadingDiv = document.getElementById('loading');\n let selectedFile = null;\n\n pdfFileInput.addEventListener('change', (event) => {\n selectedFile = event.target.files[0];\n if (selectedFile) {\n convertButton.disabled = false;\n } else {\n convertButton.disabled = true;\n }\n });\n\n convertButton.addEventListener('click', async () => {\n if (!selectedFile) {\n alert('L\u00fctfen \u00f6nce bir PDF dosyas\u0131 se\u00e7in!');\n return;\n }\n\n imageContainer.innerHTML = ''; \/\/ \u00d6nceki g\u00f6r\u00fcnt\u00fcleri temizle\n loadingDiv.style.display = 'block'; \/\/ Y\u00fckleme g\u00f6stergesini a\u00e7\n\n try {\n const arrayBuffer = await readFileAsArrayBuffer(selectedFile);\n await renderPdfToImages(arrayBuffer);\n } catch (error) {\n console.error('PDF i\u015flenirken bir hata olu\u015ftu:', error);\n alert('PDF i\u015flenirken bir hata olu\u015ftu: ' + error.message);\n } finally {\n loadingDiv.style.display = 'none'; \/\/ Y\u00fckleme g\u00f6stergesini kapat\n }\n });\n\n \/\/ Dosyay\u0131 ArrayBuffer olarak okuyan yard\u0131mc\u0131 fonksiyon\n function readFileAsArrayBuffer(file) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(reader.result);\n reader.onerror = () => reject(reader.error);\n reader.readAsArrayBuffer(file);\n });\n }\n\n \/\/ PDF'i i\u015fleyip resimlere d\u00f6n\u00fc\u015ft\u00fcren ana fonksiyon\n async function renderPdfToImages(pdfData) {\n const pdfjsLib = window.pdfjsLib; \/\/ Globalden pdfjsLib'i al\n const pdfDocument = await pdfjsLib.getDocument({ data: pdfData }).promise;\n const numPages = pdfDocument.numPages;\n\n for (let i = 1; i <= numPages; i++) {\n const page = await pdfDocument.getPage(i);\n const viewport = page.getViewport({ scale: 2 }); \/\/ \u00d6l\u00e7ek ayar\u0131 ile \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc art\u0131rabiliriz\n\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n canvas.height = viewport.height;\n canvas.width = viewport.width;\n\n await page.render({\n canvasContext: context,\n viewport: viewport,\n }).promise;\n\n const img = document.createElement('img');\n img.src = canvas.toDataURL('image\/png'); \/\/ PNG format\u0131nda g\u00f6r\u00fcnt\u00fc olu\u015ftur\n img.alt = PDF Sayfa ${i}<\/code>;\n img.style.maxWidth = '100%';\n img.style.height = 'auto';\n img.style.margin = '10px 0';\n img.style.border = '1px solid #eee';\n\n imageContainer.appendChild(img);\n }\n }\n });\n <\/code><\/pre>\n<\/p><\/div>\nDOMContentLoaded<\/code> olay\u0131n\u0131 dinleyerek sayfa y\u00fcklendi\u011finde gerekli DOM elementlerini al\u0131yoruz. pdfFileInput<\/code>‘a bir change<\/code> olay dinleyicisi ekleyerek kullan\u0131c\u0131n\u0131n bir dosya se\u00e7ip se\u00e7medi\u011fini kontrol ediyor ve “D\u00f6n\u00fc\u015ft\u00fcr” butonunun durumunu g\u00fcncelliyoruz. convertButton<\/code>‘a t\u0131kland\u0131\u011f\u0131nda ise \u015fu ad\u0131mlar izleniyor:<\/p>\n\n
imageContainer<\/code> temizleniyor ve y\u00fckleme g\u00f6stergesi aktif ediliyor.<\/li>\nreadFileAsArrayBuffer<\/code> fonksiyonu ile se\u00e7ilen PDF dosyas\u0131 bir ArrayBuffer<\/code>‘a d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcyor. Bu format, PDF.js’in PDF verilerini okuyabilmesi i\u00e7in gereklidir.<\/li>\nrenderPdfToImages<\/code> fonksiyonu \u00e7a\u011fr\u0131larak PDF i\u015fleme s\u00fcreci ba\u015flat\u0131l\u0131yor.<\/li>\nrenderPdfToImages<\/code> fonksiyonu, PDF.js’in getDocument<\/code> metodunu kullanarak PDF dosyas\u0131n\u0131 y\u00fckl\u00fcyor ve her bir sayfay\u0131 d\u00f6ng\u00fcye alarak i\u015fliyor. Her sayfa i\u00e7in dinamik olarak bir <canvas><\/code> elementi olu\u015fturuluyor, sayfan\u0131n i\u00e7eri\u011fi bu canvas \u00fczerine \u00e7iziliyor ve son olarak canvas.toDataURL('image\/png')<\/code> metodu ile bir PNG g\u00f6r\u00fcnt\u00fcs\u00fcne d\u00f6n\u00fc\u015ft\u00fcr\u00fclerek imageContainer<\/code>‘a ekleniyor. Bu ad\u0131mlar, PDF’in her sayfas\u0131n\u0131 ayr\u0131 bir g\u00f6r\u00fcnt\u00fc olarak taray\u0131c\u0131da g\u00f6stermemizi sa\u011fl\u0131yor.<\/p>\nPDF Sayfalar\u0131n\u0131 Canvas \u00dczerine \u00c7izme ve G\u00f6r\u00fcnt\u00fcye D\u00f6n\u00fc\u015ft\u00fcrme<\/h3>\n
1. Her PDF Sayfas\u0131n\u0131 \u0130\u015fleme<\/h4>\n
pdfDocument.numPages<\/code> \u00f6zelli\u011fi ile toplam sayfa say\u0131s\u0131n\u0131 ve pdfDocument.getPage(pageNumber)<\/code> metodu ile belirli bir sayfaya eri\u015fim imkan\u0131 sunar. Bu sayede, her sayfay\u0131 ayr\u0131 ayr\u0131 i\u015flemek i\u00e7in bir d\u00f6ng\u00fc kurabiliriz:<\/p>\n\n \/\/ ... renderPdfToImages fonksiyonu i\u00e7inde ...\n const pdfDocument = await pdfjsLib.getDocument({ data: pdfData }).promise;\n const numPages = pdfDocument.numPages;\n\n for (let i = 1; i <= numPages; i++) {\n const page = await pdfDocument.getPage(i);\n \/\/ ... sayfa i\u015fleme kodlar\u0131 buraya gelecek ...\n }\n \/\/ ...\n <\/code><\/pre>\n<\/p><\/div>\npdfDocument.getPage(i)<\/code> asenkron bir i\u015flemdir, bu y\u00fczden await<\/code> anahtar kelimesini kullanarak sayfan\u0131n y\u00fcklenmesini bekliyoruz. Her bir page<\/code> nesnesi, o PDF sayfas\u0131n\u0131n t\u00fcm i\u00e7eri\u011fini ve \u00f6zelliklerini bar\u0131nd\u0131r\u0131r.<\/p>\n2. Canvas Elementi Olu\u015fturma ve G\u00f6r\u00fcn\u00fcm Ayarlar\u0131<\/h4>\n
<canvas><\/code> elementi olu\u015fturmam\u0131z ve bu canvas'\u0131n boyutlar\u0131n\u0131 PDF sayfas\u0131n\u0131n boyutlar\u0131na g\u00f6re ayarlamam\u0131z gerekir. PDF.js, page.getViewport({ scale: number })<\/code> metodu ile sayfan\u0131n g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 (viewport) elde etmemizi sa\u011flar. scale<\/code> parametresi, \u00e7\u0131kt\u0131n\u0131n \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc belirler; daha y\u00fcksek bir de\u011fer, daha y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir g\u00f6r\u00fcnt\u00fc anlam\u0131na gelir, ancak ayn\u0131 zamanda daha fazla bellek ve i\u015flem g\u00fcc\u00fc gerektirir.<\/p>\n\n \/\/ ... for d\u00f6ng\u00fcs\u00fc i\u00e7inde ...\n const page = await pdfDocument.getPage(i);\n const scale = 2; \/\/ \u00c7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc art\u0131rmak i\u00e7in \u00f6l\u00e7eklendirme fakt\u00f6r\u00fc\n const viewport = page.getViewport({ scale: scale });\n\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d'); \/\/ 2D \u00e7izim ba\u011flam\u0131\n canvas.height = viewport.height;\n canvas.width = viewport.width;\n \/\/ ...\n <\/code><\/pre>\n<\/p><\/div>\ngetContext('2d')<\/code> metodu, Canvas \u00fczerinde 2D \u00e7izimler yapmak i\u00e7in gerekli olan \u00e7izim ba\u011flam\u0131n\u0131 (context) d\u00f6nd\u00fcr\u00fcr. Bu ba\u011flam arac\u0131l\u0131\u011f\u0131yla PDF i\u00e7eri\u011fi Canvas \u00fczerine \u00e7izilecektir.<\/p>\n3. PDF Sayfas\u0131n\u0131 Canvas \u00dczerine \u00c7izme<\/h4>\n
page.render()<\/code> metodunu kullan\u0131r\u0131z. Bu metot, Canvas ba\u011flam\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 parametre olarak al\u0131r:<\/p>\n\n \/\/ ... canvas olu\u015fturulduktan sonra ...\n await page.render({\n canvasContext: context,\n viewport: viewport,\n }).promise;\n \/\/ ...\n <\/code><\/pre>\n<\/p><\/div>\npage.render()<\/code> metodu da asenkron bir i\u015flem d\u00f6nd\u00fcr\u00fcr, bu y\u00fczden .promise<\/code> \u00f6zelli\u011fini kullanarak i\u015flemin tamamlanmas\u0131n\u0131 bekleriz. Bu ad\u0131m tamamland\u0131\u011f\u0131nda, PDF sayfas\u0131n\u0131n t\u00fcm i\u00e7eri\u011fi (metin, resimler, \u015fekiller) olu\u015fturdu\u011fumuz Canvas elementi \u00fczerine \u00e7izilmi\u015f olur.<\/p>\n4. Canvas \u0130\u00e7eri\u011fini G\u00f6r\u00fcnt\u00fcye D\u00f6n\u00fc\u015ft\u00fcrme ve DOM'a Ekleme<\/h4>\n
canvas.toDataURL()<\/code> veya canvas.toBlob()<\/code> metodlar\u0131n\u0131 kullanabiliriz. toDataURL()<\/code> metodu, g\u00f6r\u00fcnt\u00fcy\u00fc Base64 kodlu bir veri URL'si olarak d\u00f6nd\u00fcr\u00fcrken, toBlob()<\/code> metodu bir Blob (ikili b\u00fcy\u00fck nesne) d\u00f6nd\u00fcr\u00fcr. Blob, genellikle g\u00f6r\u00fcnt\u00fcy\u00fc indirmek veya ba\u015fka bir yere y\u00fcklemek i\u00e7in daha uygundur. Ancak taray\u0131c\u0131da g\u00f6stermek i\u00e7in toDataURL()<\/code> genellikle daha pratik ve h\u0131zl\u0131d\u0131r.<\/p>\n\n \/\/ ... render i\u015flemi tamamland\u0131ktan sonra ...\n const img = document.createElement('img');\n img.src = canvas.toDataURL('image\/png', 0.9); \/\/ PNG format\u0131nda, 0.9 kalitede g\u00f6r\u00fcnt\u00fc olu\u015ftur\n img.alt = PDF Sayfa ${i}<\/code>;\n img.style.maxWidth = '100%';\n img.style.height = 'auto';\n img.style.margin = '10px 0';\n img.style.border = '1px solid #eee';\n\n imageContainer.appendChild(img);\n <\/code><\/pre>\n<\/p><\/div>\ntoDataURL('image\/png', 0.9)<\/code> ifadesi, g\u00f6r\u00fcnt\u00fcy\u00fc PNG format\u0131nda ve %90 s\u0131k\u0131\u015ft\u0131rma kalitesiyle olu\u015fturur. JPEG format\u0131 i\u00e7in 'image\/jpeg'<\/code> kullanabilirsiniz. Kalite parametresi sadece JPEG i\u00e7in ge\u00e7erlidir. Olu\u015fturulan <img><\/code> elementi, imageContainer<\/code> div'ine eklenerek sayfada g\u00f6sterilir. Bu s\u00fcre\u00e7 her PDF sayfas\u0131 i\u00e7in tekrarland\u0131\u011f\u0131nda, PDF belgesinin her sayfas\u0131 ayr\u0131 bir g\u00f6r\u00fcnt\u00fc olarak web sayfas\u0131nda yerini alm\u0131\u015f olur. Bu y\u00f6ntem, PDF i\u00e7eri\u011fini tamamen taray\u0131c\u0131 ortam\u0131nda, herhangi bir sunucu etkile\u015fimi olmadan g\u00f6rsel bir formata d\u00f6n\u00fc\u015ft\u00fcrmenin g\u00fc\u00e7l\u00fc ve esnek bir yolunu sunar.<\/p>\nGeli\u015fmi\u015f Teknikler ve Optimizasyonlar: Daha \u0130yi Bir Deneyim \u0130\u00e7in Neler Yap\u0131labilir?<\/h3>\n
1. Web Workers ile Performans\u0131 Art\u0131rma<\/h4>\n
pdf.worker.js<\/code> dosyas\u0131 bu ama\u00e7la kullan\u0131l\u0131r.<\/p>\nGlobalWorkerOptions.workerSrc<\/code> ayar\u0131n\u0131 do\u011fru yaparak PDF.js'in Web Worker'\u0131 kullanmas\u0131n\u0131 sa\u011flayabilirsiniz. Bu, PDF ayr\u0131\u015ft\u0131rma gibi a\u011f\u0131r g\u00f6revlerin ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z olarak y\u00fcr\u00fct\u00fclmesini sa\u011flar, b\u00f6ylece kullan\u0131c\u0131 aray\u00fcz\u00fc yan\u0131t vermeye devam eder. E\u011fer kendi \u00f6zel PDF i\u015fleme mant\u0131\u011f\u0131n\u0131z\u0131 yaz\u0131yorsan\u0131z ve bu mant\u0131k yo\u011fun hesaplama gerektiriyorsa, kendi Web Worker'\u0131n\u0131z\u0131 olu\u015fturmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirecektir.<\/p>\n\n \/\/ Web Worker kullan\u0131m\u0131 zaten pdf.js'in GlobalWorkerOptions.workerSrc ile ayarlanm\u0131\u015ft\u0131r.\n \/\/ Ancak kendi yo\u011fun i\u015fleminiz i\u00e7in bir \u00f6rnek:\n \/\/ const myWorker = new Worker('my-custom-worker.js');\n \/\/ myWorker.postMessage({ pdfData: somePdfData });\n \/\/ myWorker.onmessage = (event) => {\n \/\/ console.log('Workerdan gelen mesaj:', event.data);\n \/\/ };\n <\/code><\/pre>\n<\/p><\/div>\n2. Bellek Y\u00f6netimi ve Temizli\u011fi<\/h4>\n
\n
canvas.toBlob()<\/code> ile Blob URL'leri olu\u015fturuyorsan\u0131z, bu URL'leri kulland\u0131ktan sonra URL.revokeObjectURL()<\/code> ile serbest b\u0131rakmay\u0131 unutmay\u0131n. Aksi takdirde, bu URL'ler bellekte kalmaya devam edebilir.<\/li>\npdfDocument.destroy()<\/code> metodu ile PDF belgesi nesnesini ve ili\u015fkili kaynaklar\u0131 serbest b\u0131rakman\u0131za olanak tan\u0131r. D\u00f6n\u00fc\u015f\u00fcm i\u015flemi tamamland\u0131ktan sonra bu metodu \u00e7a\u011f\u0131rarak bellek temizli\u011fi yapabilirsiniz.<\/li>\n<\/ul>\n3. Farkl\u0131 G\u00f6r\u00fcnt\u00fc Formatlar\u0131 ve Kalite Ayarlar\u0131<\/h4>\n
canvas.toDataURL()<\/code> ve canvas.toBlob()<\/code> metodlar\u0131, farkl\u0131 g\u00f6r\u00fcnt\u00fc formatlar\u0131n\u0131 destekler:<\/p>\n\n
'image\/png'<\/code>):<\/strong> \u015eeffafl\u0131\u011f\u0131 destekler ve kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma sunar. Metin ve \u00e7izgisel grafikler i\u00e7in idealdir, ancak dosya boyutlar\u0131 JPEG'den daha b\u00fcy\u00fck olabilir.<\/li>\n'image\/jpeg'<\/code>):<\/strong> Foto\u011fraflar ve karma\u015f\u0131k g\u00f6r\u00fcnt\u00fcler i\u00e7in kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rma sunar. Genellikle daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sa\u011flar. \u0130kinci bir parametre olarak kalite (0.0 ile 1.0 aras\u0131nda) belirtebilirsiniz (\u00f6rne\u011fin: canvas.toDataURL('image\/jpeg', 0.8)<\/code>).<\/li>\n'image\/webp'<\/code>):<\/strong> Hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rmay\u0131 destekleyen modern bir formatt\u0131r. Genellikle JPEG ve PNG'den daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunar ve iyi bir kalite\/boyut dengesi sa\u011flar. Taray\u0131c\u0131 deste\u011fini kontrol etmeniz gerekebilir.<\/li>\n<\/ul>\n4. \u0130lerleme G\u00f6stergesi ve Kullan\u0131c\u0131 Geri Bildirimi<\/h4>\n
getDocument<\/code> metodunun bir ilerleme geri \u00e7a\u011f\u0131r\u0131m (progress callback) fonksiyonu almas\u0131na izin vermese de, her sayfa i\u015flendi\u011finde bir mesaj g\u00fcncelleyebilir veya genel bir d\u00f6n\u00fc\u015ft\u00fcrme animasyonu g\u00f6sterebilirsiniz. Bu, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirecektir.<\/p>\n\n \/\/ ... renderPdfToImages fonksiyonu i\u00e7inde ...\n for (let i = 1; i <= numPages; i++) {\n \/\/ ... sayfa i\u015fleme kodu ...\n \/\/ Her sayfa i\u015flendikten sonra ilerleme mesaj\u0131n\u0131 g\u00fcncelle\n loadingDiv.textContent = Sayfa ${i} \/ ${numPages} d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcyor...<\/code>;\n await new Promise(resolve => setTimeout(resolve, 10)); \/\/ UI'\u0131n g\u00fcncellenmesi i\u00e7in k\u00fc\u00e7\u00fck bir gecikme\n }\n loadingDiv.textContent = 'D\u00f6n\u00fc\u015ft\u00fcrme tamamland\u0131!';\n \/\/ ...\n <\/code><\/pre>\n<\/p><\/div>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131 ve Kullan\u0131m Alanlar\u0131<\/h3>\n
1. G\u00fcvenli Belge \u00d6nizleme ve G\u00f6r\u00fcnt\u00fcleyiciler<\/h4>\n
2. \u00c7evrimd\u0131\u015f\u0131 \u00c7al\u0131\u015fan Web Uygulamalar\u0131<\/h4>\n
3. Dinamik \u0130\u00e7erik Olu\u015fturma ve D\u00fczenleme Ara\u00e7lar\u0131<\/h4>\n
4. E-Kitap Okuyucular ve Belge Y\u00f6netim Sistemleri<\/h4>\n
5. G\u00fcvenlik ve Gizlilik Odakl\u0131 Dosya \u0130\u015fleme<\/h4>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
1. Neden taray\u0131c\u0131 i\u00e7i PDF'ten g\u00f6r\u00fcnt\u00fcye d\u00f6n\u00fc\u015f\u00fcm tercih etmeliyim?<\/h4>\n
2. T\u00fcm PDF'ler sorunsuz bir \u015fekilde g\u00f6r\u00fcnt\u00fclere d\u00f6n\u00fc\u015f\u00fcr m\u00fc?<\/h4>\n
3. Performans sorunlar\u0131 nas\u0131l a\u015f\u0131l\u0131r?<\/h4>\n
4. D\u00f6n\u00fc\u015ft\u00fcr\u00fclen g\u00f6r\u00fcnt\u00fcler otomatik olarak indirilebilir mi?<\/h4>\n
canvas.toBlob()<\/code> metodu ile bir Blob nesnesine d\u00f6n\u00fc\u015ft\u00fcrd\u00fckten sonra, bu Blob i\u00e7in bir URL olu\u015fturup (URL.createObjectURL()<\/code>) ve bu URL'yi kullanarak bir <a><\/code> elementi ile indirilebilir bir ba\u011flant\u0131 olu\u015fturabilirsiniz. T\u00fcm g\u00f6r\u00fcnt\u00fcleri tek bir ZIP dosyas\u0131 olarak indirmek i\u00e7in ise JSZip<\/a> gibi bir k\u00fct\u00fcphane kullanman\u0131z gerekebilir.<\/p>\n5. Hangi taray\u0131c\u0131lar PDF.js'i ve Canvas API'sini destekler?<\/h4>\n
Sonu\u00e7<\/h3>\n