JavaScript ile Tarayıcıda Çalışan PDF Filtre Stüdyosu Nasıl Yapılır?
JavaScript ile Tarayıcıda Çalışan PDF iddiası ne anlatıyor? JavaScript ile Tarayıcıda Çalışan PDF kapsamında, pDF düzenleme, imza eklemek veya belgeleri birleştirmekle sınırlı değildir. Bazen yalnızca Photoshop'u açmadan veya masaüstü yazılımı yüklemeden parlaklığı artırarak, kontrastı artırarak, bulanıklık…
JavaScript ile Tarayıcıda Çalışan PDF iddiası ne anlatıyor?
JavaScript ile Tarayıcıda Çalışan PDF kapsamında, pDF düzenleme, imza eklemek veya belgeleri birleştirmekle sınırlı değildir. Bazen yalnızca Photoshop’u açmadan veya masaüstü yazılımı yüklemeden parlaklığı artırarak, kontrastı artırarak, bulanıklık ekleyerek, gri tonlamaya dönüştürerek veya yaratıcı görsel efektler uygulayarak PDF’nin görünümünü iyileştirmek isteyebilirsiniz.
JavaScript ile Tarayıcıda Çalışan PDF kapsamında, bu eğitimde JavaScript, PDF.js, Canvas API ve PDF-lib’i kullanarak tarayıcı tabanlı bir PDF Filter Studio oluşturacaksınız. Kullanıcılar bir PDF yükleyebilir, her sayfayı önizleyebilir, birden fazla filtre katmanını yığabilir, önceden ayarlanmış efektleri uygulayabilir, seçilen sayfaları işleyebilir, son belgenin ön izlemesini yapabilir, yeniden adlandırabilir ve düzenlenen PDF’yi doğrudan tarayıcıdan indirebilir.
JavaScript ile Tarayıcıda Çalışan PDF kapsamında, her adım yerel olarak çalıştığından, yüklenen PDF kullanıcının cihazından asla ayrılmaz, bu da uygulamayı hem hızlı hem de gizlilik dostu hale getirir. İçindekiler Bu PDF Filtre Stüdyosu Ne Yapar ve Nasıl Çalışır Neden bir PDF Filtre Stüdyosu Oluşturmalısınız?
Tasarım ve teknik ayrıntılar
JavaScript ile Tarayıcıda Çalışan PDF kapsamında, Kullanılan Proje Kurulum Kitaplıkları HTML Düzeni Oluşturma PDF’leri Yükleme ve Önizleme Filtre Katmanları Oluşturma PDF Sayfalarına Filtre Uygulama Ön Ayar Efektleri Uygulama Son PDF’yi Oluşturma Sonucun Önizlenmesi Demoyu Yeniden Adlandırma ve İndirme: PDF Filter Studio Nasıl Çalışır Performans İpuçları Yaygın Hatalar Sonuç Bu PDF Filter Studio Ne Yapar ve Nasıl Çalışır Yalnızca tek bir işlem gerçekleştiren araçlardan farklı olarak, bu PDF Filter Studio, kullanıcıların yeni bir PDF oluşturmadan önce birden fazla görüntü ayarlamasını birleştirmesine olanak tanır.
JavaScript ile Tarayıcıda Çalışan PDF kapsamında, kıç Bir belge yüklendiğinde her sayfa tarayıcıda PDF.js ile oluşturulur ve bir önizleme penceresi içinde görüntülenir. Kullanıcılar daha sonra bir veya daha fazla filtre katmanı oluşturabilir, parlaklık, kontrast, doygunluk, bulanıklık, opaklık, gri tonlama, sepya, renkleri ters çevirme veya renk tonu döndürme gibi değerleri ayarlayabilir ve bu ayarların belgeyi nasıl etkilediğini anında görebilir.
JavaScript ile Tarayıcıda Çalışan PDF kapsamında, her ayarı manuel olarak yapılandırmak istemeyen kullanıcılar için uygulama aynı zamanda Gri Tonlama, Sepya (Eski), Ters Çevir (Negatif), Keskinleştir, Parıltı ve Vinyet gibi önceden ayarlanmış efektleri de içerir.
Okuyucu için pratik anlamı
JavaScript ile Tarayıcıda Çalışan PDF kapsamında, İstenilen görünüme ulaştıktan sonra, seçilen filtreler seçilen sayfalara uygulanır, PDF-lib kullanılarak yeni bir PDF oluşturulur ve tamamlanan belge, dosyaları herhangi bir sunucuya yüklemeden incelenebilir, yeniden adlandırılabilir ve indirilebilir.
Bu iş akışı, raporları, sunumları, taranmış belgeleri, pazarlama materyallerini ve resim ağırlıklı PDF’leri doğrudan tarayıcının içinde geliştirmek için esnek bir yol sağlar. Neden bir PDF Filtre Stüdyosu Oluşturmalısınız? Çoğu çevrimiçi PDF düzenleyicisi, belgeleri birleştirme, bölme, döndürme veya sıkıştırma gibi yapısal değişikliklere odaklanır.
Çok azı kullanıcıların ayarlanabilir görüntü filtreleri kullanarak PDF sayfalarının görsel görünümünü geliştirmesine olanak tanır. Tarayıcı tabanlı bir PDF Filter Studio, belge işlemeyi görüntü düzenlemeyle birleştirerek bu boşluğu doldurur. Kullanıcılar, PDF sayfalarını görüntü düzenleme yazılımına aktarmak, efekt uygulamak ve belgeyi yeniden oluşturmak yerine tüm iş akışını tek bir yerde tamamlayabilir.
JavaScript ile Tarayıcıda Çalışan PDF iddiası ne anlatıyor?
Bu projeyi oluşturmak aynı zamanda PDF sayfalarını PDF.js ile oluşturmak, görüntüleri Canvas API ile işlemek, yeniden kullanılabilir filtre ardışık düzenleri oluşturmak, birden fazla filtre katmanını yönetmek, dinamik kullanıcı arayüzleriyle çalışmak ve PDF-lib kullanarak yeni PDF dosyaları oluşturmak dahil olmak üzere birçok önemli web geliştirme konseptini öğrenmenin mükemmel bir yoludur.
Her işlem tarayıcının içinde yerel olarak gerçekleştiğinden, hızlı performans sunarken ve ek yazılım yükleme ihtiyacını ortadan kaldırırken belgeler gizli kalır. Proje Kurulumu Aşağıdaki yapıya sahip bir proje klasörü oluşturun: pdf-filter-studio/ │── index.html │── style.css │── script.js │── varlıklar/ Proje kasıtlı olarak basittir. index.html uygulama arayüzünü oluşturur. style.css düzeni ve görünümü kontrol eder.
script.js, PDF oluşturmayı, filtre işlemeyi ve PDF oluşturmayı yönetir. varlıklar uygulama tarafından kullanılan simgeleri veya diğer isteğe bağlı kaynakları saklar. Klasör yapısı hazır olduğunda gerekli kitaplıkları içe aktaracağız, yükleme arayüzünü oluşturacağız, PDF sayfalarını oluşturacağız ve filtre sistemini oluşturmaya başlayacağız.
Kullanılan Kitaplıklar Bu PDF Filter Studio, PDF dosyalarını yüklemek, sayfaları oluşturmak, birden fazla görsel filtre uygulamak ve yepyeni bir indirilebilir PDF oluşturmak için üç tarayıcı teknolojisini birleştirir. PDF.js, PDF sayfalarının tarayıcı içinde oluşturulmasından sorumludur.
Canvas API uygulaması oluşturulan her sayfaya parlaklık, kontrast, bulanıklık, doygunluk, gri tonlama, sepya, ters çevirme, opaklık ve renk döndürme filtrelerini doğrudan katar. Son olarak, PDF-lib, seçilen tüm sayfalar işlendikten sonra düzenlenmiş PDF’yi oluşturur.
JavaScript’inizi yüklemeden önce gerekli kitaplıkları ekleyin: PDF.js çalışanını yapılandırın.
pdfjsLib.GlobalWorkerOptions.workerSrc = “pdf.worker.min.js”; Bir çalışanın kullanılması, JavaScript kullanıcı arayüzünü işlemeye devam ederken görüntü oluşturmanın sorunsuz olmasını sağlar. HTML Düzenini Oluşturma Uygulama dört bölüme ayrılmıştır: Yükleme Alanı PDF Önizleme Filtre Paneli İndirme Bölümü Temel yapıyı oluşturun.
Başlangıçta yalnızca yükleme bölümü görünür. Bir PDF seçildiğinde geri kalan bölümler otomatik olarak görünür. DOM Elements Store’u seçme Uygulama genelinde kullanılan öğelere referanslar.const uploadSection = document.getElementById(“uploadSection”); const önizlemeCanvas = document.getElementById(“previewCanvas”); const öncekiButton = document.getElementById(“öncekiSayfa”); yapı nextButton = document.getElementById(“nextPage”); const rotaryLeftButton = document.getElementById(“rotateLeft”); const rotaryRightButton = document.getElementById(“rotateRight”); Referansları betiğin başında tutmak, kodun geri kalanını daha temiz ve bakımı kolay hale getirir.
PDF’leri Yükleme ve Önizleme Yükleme alanı hem sürükleyip bırakma hem de manuel dosya seçimini destekler. Belgeyi yüklemeden önce seçilen dosyanın gerçekten bir PDF olduğunu doğrulayın. eşzamansız işlev yüklemePdf(dosya) { if (!file || dosya.type !== “uygulama/pdf”) { warning(“Lütfen bir PDF dosyası seçin.”); geri dönmek; } waitPdf(file); } Doğrulama başarılı olduktan sonra belge belleğe yüklenir.
PDF’yi Yükleme Yüklenen dosyayı PDF.js ile açmadan önce ArrayBuffer’a dönüştürün. eşzamansız işlev loadPdf(dosya) { const bytes = wait file.arrayBuffer(); pdfDocument = bekliyor pdfjsLib.getDocument({ veri: bayt }).söz; güncelSayfa = 1; renderPage(currentPage); } Belge başarıyla yüklendikten sonra ilk sayfa otomatik olarak görüntülenir. PDF Sayfalarını Oluşturma Her sayfa bir HTML tuvali üzerinde oluşturulur.
Seçilen sayfayı alın. const sayfa = wait pdfDocument.getPage(currentPage); Bir görünüm alanı oluşturun. const görünüm portu = page.getViewport({ ölçek: 1,5 }); Tuvali yeniden boyutlandırın. önizlemeCanvas.width = viewport.width; önizlemeCanvas.height = viewport.height; Sayfayı işleyin.
page.render bekleniyor({ tuvalDevam dahili: önizlemeCanvas.getContext(“2d”), görünüm alanı }).söz; Artık her sayfa tam olarak orijinal PDF’de olduğu gibi görünüyor. Sayfalar Arasında Gezinme Çoğu PDF dosyası birden fazla sayfa içerir, bu nedenle kullanıcıların basit gezinme kontrollerine ihtiyacı vardır. Geçerli sayfayı saklayın. geçerliSayfa = 1 olsun; let pdfDocument = null; Önceki sayfaya geçin.
öncekiButton.addEventListener(“tıklayın”, async () => { if (geçerliSayfa > 1) { güncelSayfa–; renderPage’i bekliyor(currentPage); } }); Sonraki sayfaya geçin. nextButton.addEventListener(“tıklayın”, async () => { if (currentPage < pdfDocument.numPages) { güncelSayfa++; renderPage'i bekliyor(currentPage); } }); Sayfa sayacını güncelleyin.
pageIndicator.textContent = `Sayfa ${currentPage} / ${pdfDocument.numPages}’; Kullanıcılar artık filtre eklemeden önce belgeye göz atabilir. Önizlemeyi Döndürme Uygulama ayrıca önizleme döndürme kontrollerini de içerir. Döndürme yalnızca önizlemeyi etkiler ve kullanıcıların filtreleri uygulamadan önce sayfaları farklı yönlerden incelemesine olanak tanır. Geçerli dönüş açısını kaydedin. dönme = 0 olsun; Sola döndür.
rotaryLeftButton.addEventListener(“tıklayın”, () => { dönüş -= 90; renderPage(currentPage); }); Sağa döndürün. rotaryRightButton.addEventListener(“tıklayın”, () => { dönüş += 90; renderPage(currentPage); }); Görünüm penceresini oluştururken döndürmeyi uygulayın. const görünüm portu = page.getViewport({ ölçek: 1,5, rotasyon }); Bu kontroller iyileştirir Orijinal PDF’yi değiştirmeden önizleme deneyimi.
Filtre Panelini Oluşturma Filtre Paneli, PDF Filter Studio’nun temelidir. Kullanıcılar tek bir efekt uygulamak yerine, filtre katmanlarından oluşan bir yığın oluşturabilir, birden fazla ayarlamayı birleştirebilir ve son PDF’yi oluşturmadan önce sonucu önizleyebilir.
Her filtre katmanı, Parlaklık, Kontrast, Doygunluk, Bulanıklık, Opaklık, Gri Tonlama, Sepya, Renkleri Ters Çevirme veya Ton Döndürme gibi bir görüntü ayarlamasını temsil eder. Kullanıcılar ayrıca Gri Tonlama, Sepya (Eski), Ters Çevir (Negatif), Keskinleştir, Parıltı ve Vinyet gibi önceden ayarlanmış efektleri tek tıklamayla uygulayabilirler.
Filtre Katmanları Oluşturma Her ayarlamayı sabit kodlamak yerine, filtreleri bir dizi içinde saklayacağız. const filtreler = []; Her filtre kendi türünü ve değerini içerir. filtreler.push({ tür: “parlaklık”, değer: 120 }); Bu yapının kullanılması, kullanıcıların birden fazla filtreyi herhangi bir sırayla birleştirmesine olanak tanır.
Yeni Bir Filtre Katmanı Ekleme Kullanıcılar önce açılır menüden bir filtre seçip ardından Ekle’ye tıklayın. Açılır menüyü oluşturun.
Parlaklık Kontrast Doygunluk Bulanıklaştır Opaklık Gri tonlamalı Sepya Renkleri Ters Çevir Ton Döndürme Seçilen filtreyi ekleyin.
addButton.addEventListener(“tıklayın”, () => { filtreler.push({ şunu yazın: filterType.value, değer: 100 }); renderFilters(); }); Her biri Filtre Katmanları panelinde hemen yeni filtre belirir. Filtre Katmanlarını Görüntüleme Bir filtre eklendiğinde, filtre listesini yeniden oluşturun.
işlev renderFilters() { filterContainer.innerHTML = “”; filter.forEach(createFilterCard); } Her filtre kartı şunları içerir: Filtre adı Değer kaydırıcısı Geçerli değer Sil düğmesi Bu tasarım, birden fazla ayarın yönetilmesini kolaylaştırır. Filtre Değerlerini Güncelleme Her katman kendi kaydırıcısını içerir.
Parlaklık Örneği: Slider.addEventListener(“input”, event => { filter.value = Sayı(olay.hedef.değer); updatePreview(); }); Bir kaydırıcı değiştiğinde önizleme hemen yenilenir. Her filtre tipi için aynı mantık yeniden kullanılır. Çoklu Filtre Türlerini Destekleme Farklı filtreler farklı aralıklar kullanır.
sabit aralıklar = { parlaklık: [0, 200], kontrast: [0, 200], doygunluk: [0, 200], bulanıklaştırma: [0, 20], opaklık: [0, 100], gri tonlamalı: [0, 100], sepya: [0, 100], ters çevir: [0, 100], renk tonu: [0, 360] }; Bu, her ayarlamanın en uygun değerleri kullanmasına olanak sağlar. Önceden Ayarlanmış Efektler Bazı kullanıcılar, filtre katmanlarını manuel olarak oluşturmak yerine tek tıklama efektlerini tercih eder.
Uygulama birkaç ön ayar düğmesi içerir. Her ön ayar, otomatik olarak bir veya daha fazla filtre katmanı oluşturur.
Örneğin, Gri tonlama: işlev grileri calePreset() { filtreler.uzunluk = 0; filtreler.push({ tür: “gri tonlamalı”, değer: 100 }); updatePreview(); } Kullanıcılar oluşturulan katmanları daha sonra da düzenleyebilir. Belirli Sayfalara Filtre Uygulamak Her sayfanın aynı etkiye ihtiyacı yoktur. Kullanıcılar filtrelerin nereye uygulanacağını seçebilir. Sayfa seçeneklerini oluşturun.
Yalnızca geçerli sayfa Tüm sayfalar Belirli sayfalar Seçilen seçeneği alın. const pageMode = document.querySelector(‘input[name=”pages”]:checked’).value; Kullanıcılar Belirli sayfalar’ı seçerse sayfa aralığını okuyun.
const pageRange = document.getElementById(“pageRange”).value; Bu, kullanıcıların yalnızca seçilen sayfaları düzenlemesine ve geri kalanını değiştirmeden bırakmasına olanak tanır. Filtre Katmanlarını Kaldırma Kullanıcılar herhangi bir filtreyi işlemeden önce silebilir. Silme işlevini oluşturun.
işlev kaldırFilter(dizin) { filtreler.splice(indeks, 1); renderFilters(); updatePreview(); } Bir katmanın kaldırılması önizlemeyi hemen günceller. Bu, farklı kombinasyonlarla deneme yapmayı hızlı ve sezgisel hale getirir. PDF Sayfalarına Filtre Uygulama Şimdi yüklenen PDF’yi işleme zamanı.
Kullanıcılar filtre katmanlarını yapılandırmayı tamamladıktan sonra uygulama, seçilen her PDF sayfasını bir HTML tuvaline dönüştürür, yapılandırılmış filtreleri sırayla uygular ve PDF-lib’i kullanarak yepyeni bir PDF oluşturur. Yalnızca tek bir efekt uygulayan önceki projelerin aksine, bu Filter Studio birden fazla filtre katmanını destekleyerek kullanıcıların kendi görüntü işleme hattını oluşturmasına olanak tanır.
Kanvas Filtre Dizesini Oluşturma HTML Kanvas API’si, birden çok filtrenin tek bir filtre dizesinde birleştirilmesine olanak tanır. Boş bir dizeyle başlayın. let filterString = “”; Her filtre katmanında döngü yapın. filtreler.forEach(filtre => { filterString += `${filter.type} (${filter.value}) `; }); Tamamlanan filtre dizesini atayın.
context.filter = filterString.trim(); Artık her etkin katman, sayfa oluşturulmadan önce birleştirilir. Filtrelenmiş Sayfayı Çizme Filtre dizesi oluşturulduktan sonra, oluşturulan PDF sayfasını yeniden çizin. context.drawImage(pdfCanvas, 0, 0); Kanvas artık sayfanın filtrelenmiş sürümünü içeriyor. Bu yaklaşım, tek bir işleme geçişinde çeşitli ayarlamaların uygulanmasına olanak tanır.
Birden Fazla Filtre Katmanı Uygulamak Her ayarlama filtre dizisinin içinde saklandığından, kullanıcılar efektleri istedikleri gibi birleştirebilirler. Örneğin: filtreler = [ { tür: “parlaklık”, değer: “%130” }, { tür: “kontrast”, değer: “%115” }, { tür: “bulanıklaştırma”, değer: “5 piksel” } ]; Bu filtreler, oluşturulmadan önce otomatik olarak tek bir Canvas filtre dizesinde birleştirilir.
Bu, kodu basit tutarken uygulamayı esnek hale getirir. Ön Ayar Efektlerini Uygulama Ön ayar düğmeleri yalnızca geçerli filtre listesini önceden tanımlanmış değerlerle değiştirir. e
İlgili yazılar
- Zoom’daki Ekran Paylaşımı Açığı Cihazınızı Tehlikeye Atabilir: Hemen Güncelleyin
- Çam kozalağı şurubu faydaları nelerdir, nasıl yapılır
JavaScript ile Tarayıcıda Çalışan PDF hakkında ek okuma
Editörün Notu
Tarayıcıda çalışan PDF filtre stüdyosu, ek yazılım gerektirmeden hızlı ve pratik düzenlemeler yapmanızı sağlar; özellikle görsel iyileştirmeler için JavaScript tabanlı çözümlerle zamandan tasarruf edebilirsiniz.
“JavaScript ile Tarayıcıda Çalışan PDF Filtre Stüdyosu Nasıl Yapılır?” üzerine bir düşünce
Yorumlar kapalı.