پی ڈی ایف ایڈیٹنگ صرف دستخطوں کو شامل کرنے یا دستاویزات کو ضم کرنے تک محدود نہیں ہے۔ کبھی کبھی آپ فوٹو شاپ کھولے یا کوئی ڈیسک ٹاپ سافٹ ویئر انسٹال کیے بغیر چمک بڑھا کر، کنٹراسٹ بڑھا کر، دھندلا پن شامل کرکے، گرے اسکیل میں تبدیل کرکے، یا تخلیقی بصری اثرات کا اطلاق کرکے اپنے پی ڈی ایف کی شکل کو بہتر بنانا چاہتے ہیں۔
اس ٹیوٹوریل میں، ہم JavaScript، PDF.js، Canvas API، اور PDF-lib کا استعمال کرتے ہوئے براؤزر پر مبنی پی ڈی ایف فلٹر اسٹوڈیو بناتے ہیں۔ صارفین پی ڈی ایف اپ لوڈ کر سکتے ہیں، ہر صفحہ کا جائزہ لے سکتے ہیں، متعدد فلٹر لیئرز کو اسٹیک کر سکتے ہیں، پہلے سے سیٹ اثرات کا اطلاق کر سکتے ہیں، منتخب صفحات پر کارروائی کر سکتے ہیں، حتمی دستاویز کا پیش نظارہ کر سکتے ہیں، اس کا نام تبدیل کر سکتے ہیں، اور ترمیم شدہ پی ڈی ایف کو براہ راست براؤزر سے ڈاؤن لوڈ کر سکتے ہیں۔
تمام اقدامات مقامی طور پر کیے جاتے ہیں، اس لیے اپ لوڈ کردہ پی ڈی ایف کبھی بھی صارف کے آلے کو نہیں چھوڑتا، جس سے ایپلیکیشن تیز اور پرائیویسی کے لیے موزوں ہوتی ہے۔
انڈیکس
یہ پی ڈی ایف فلٹر اسٹوڈیو کیا ہے اور یہ کیسے کام کرتا ہے؟
ٹولز کے برعکس جو صرف ایک کام انجام دیتے ہیں، یہ پی ڈی ایف فلٹر اسٹوڈیو صارفین کو نئی پی ڈی ایف بنانے سے پہلے متعدد امیج ایڈجسٹمنٹ کو یکجا کرنے کی اجازت دیتا ہے۔
دستاویز کو اپ لوڈ کرنے کے بعد، ہر صفحہ کو براؤزر میں اس طرح پیش کیا جاتا ہے: PDF.js یہ پیش نظارہ ونڈو کے اندر ظاہر ہوگا۔ اس کے بعد صارف ایک یا زیادہ فلٹر لیئرز بنا سکتے ہیں اور قدروں کو ایڈجسٹ کر سکتے ہیں جیسے کہ چمک، کنٹراسٹ، سیچوریشن، بلر، اوپیسٹی، گرے اسکیل، سیپیا، کلر انورسیشن، یا ہیو روٹیشن، اور فوری طور پر دیکھ سکتے ہیں کہ وہ سیٹنگز دستاویز کو کیسے متاثر کرتی ہیں۔
ان صارفین کے لیے جو تمام ایڈجسٹمنٹ کو دستی طور پر کنفیگر نہیں کرنا چاہتے، ایپلی کیشن میں پیش سیٹ اثرات بھی شامل ہیں: گرے اسکیل، سیپیا (ونٹیج)، انورٹ (منفی)، شارپن، گلو اور ویگنیٹ۔ ایک بار جب آپ اپنی مطلوبہ شکل حاصل کرلیں تو، آپ کے منتخب کردہ فلٹرز منتخب صفحات پر لاگو ہوں گے اور اس کا استعمال کرتے ہوئے ایک نئی پی ڈی ایف بنائی جائے گی: PDF-libآپ فائلوں کو سرور پر اپ لوڈ کیے بغیر مکمل شدہ دستاویزات کا جائزہ لے سکتے ہیں، نام بدل سکتے ہیں اور ڈاؤن لوڈ کر سکتے ہیں۔
یہ ورک فلو براہ راست براؤزر کے اندر رپورٹس، پریزنٹیشنز، اسکین شدہ دستاویزات، مارکیٹنگ کے مواد اور امیج سے بھرپور PDFs کو بڑھانے کا ایک لچکدار طریقہ فراہم کرتا ہے۔
پی ڈی ایف فلٹر اسٹوڈیو کیوں بنائیں؟
زیادہ تر آن لائن پی ڈی ایف ایڈیٹرز ساختی تبدیلیوں پر توجہ مرکوز کرتے ہیں جیسے دستاویزات کو ضم کرنا، تقسیم کرنا، گھومنا، یا کمپریس کرنا۔ بہت کم صارفین اپنے پی ڈی ایف صفحات کی بصری شکل کو بڑھانے کے لیے ایڈجسٹ امیج فلٹرز استعمال کر سکتے ہیں۔
براؤزر پر مبنی پی ڈی ایف فلٹر اسٹوڈیو دستاویز کی پروسیسنگ اور امیج ایڈیٹنگ کو ملا کر اس خلا کو پر کرتا ہے۔ پی ڈی ایف پیجز کو امیج ایڈیٹنگ سوفٹ ویئر میں ایکسپورٹ کرنے، ایفیکٹس لگانے اور دستاویز کو دوبارہ بنانے کے بجائے، صارفین پورے ورک فلو کو ایک جگہ پر مکمل کر سکتے ہیں۔
اس پروجیکٹ کی تعمیر بہت سے اہم ویب ڈویلپمنٹ تصورات کو سیکھنے کا بھی ایک بہترین طریقہ ہے، بشمول PDF.js کا استعمال کرتے ہوئے PDF صفحات کو رینڈر کرنا، Canvas API کا استعمال کرتے ہوئے امیج پروسیسنگ، دوبارہ قابل استعمال فلٹر پائپ لائنز بنانا، متعدد فلٹر لیئرز کا نظم کرنا، متحرک صارف انٹرفیس کے ساتھ کام کرنا، اور PDF-lib کا استعمال کرتے ہوئے نئی PDF فائلیں بنانا۔
براؤزر کے اندر سب کچھ مقامی طور پر ہوتا ہے، لہذا آپ کے دستاویزات نجی رہتے ہیں، جبکہ تیز کارکردگی فراہم کرتے ہیں اور کسی اضافی سافٹ ویئر کی تنصیب کی ضرورت نہیں ہوتی ہے۔
پروجیکٹ کی ترتیبات
مندرجہ ذیل ڈھانچے کے ساتھ ایک پروجیکٹ فولڈر بنائیں:
pdf-filter-studio/
│── index.html
│── style.css
│── script.js
│── assets/
یہ منصوبہ جان بوجھ کر آسان ہے۔
-
index.html ایپلیکیشن انٹرفیس بنائیں۔
-
style.css ترتیب اور ظاہری شکل کو کنٹرول کریں۔
-
script.js پی ڈی ایف رینڈرنگ، فلٹر پروسیسنگ، اور پی ڈی ایف تخلیق کا انتظام کرتا ہے۔
-
اثاثہ ایپلیکیشن کے ذریعہ استعمال ہونے والے آئیکنز یا دیگر اختیاری وسائل کو اسٹور کرتا ہے۔
فولڈر کا ڈھانچہ تیار ہوجانے کے بعد، ہم ضروری لائبریریوں کو درآمد کرنا، اپ لوڈ انٹرفیس بنانا، پی ڈی ایف صفحات کو پیش کرنا، اور فلٹر سسٹم بنانا شروع کردیتے ہیں۔
استعمال شدہ لائبریریاں
یہ پی ڈی ایف فلٹر اسٹوڈیو پی ڈی ایف فائلوں کو اپ لوڈ کرنے، صفحات کو رینڈر کرنے، متعدد بصری فلٹرز لگانے، اور نئی ڈاؤن لوڈ کے قابل پی ڈی ایف بنانے کے لیے تین براؤزر ٹیکنالوجیز کو یکجا کرتا ہے۔
PDF.js یہ براؤزر کے اندر پی ڈی ایف صفحات کو رینڈر کرنے کا ذمہ دار ہے۔
کہ کینوس API برائٹنس، کنٹراسٹ، بلر، سیچوریشن، گرے اسکیل، سیپیا، انورٹ، اوپیسٹی، اور ہیو روٹیشن فلٹرز براہ راست ہر پیش کردہ صفحہ پر لگائیں۔
آخر کار PDF-lib تمام منتخب صفحات پر کارروائی کے بعد، ایک ترمیم شدہ پی ڈی ایف تیار کی جاتی ہے۔
JavaScript لوڈ کرنے سے پہلے مطلوبہ لائبریریاں شامل کریں۔
PDF.js ورکر کو کنفیگر کریں۔
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://www.freecodecamp.org/news/build-pdf-filter-studio-javascript/pdf.worker.min.js";
کارکنوں کا استعمال یقینی بناتا ہے کہ رینڈرنگ ہموار رہے جب کہ JavaScript صارف کے انٹرفیس پر کارروائی جاری رکھے۔
ایک HTML لے آؤٹ بنائیں
درخواست کو چار حصوں میں تقسیم کیا گیا ہے:
-
اپ لوڈ کے علاقے
-
پی ڈی ایف پیش نظارہ
-
فلٹر پینل
-
سیکشن ڈاؤن لوڈ کریں۔
ایک بنیادی ڈھانچہ بنائیں۔
ابتدائی طور پر، صرف اپ لوڈز سیکشن ظاہر ہوتا ہے۔ جب آپ پی ڈی ایف کو منتخب کرتے ہیں، تو باقی حصے خود بخود ظاہر ہو جاتے ہیں۔
DOM عنصر منتخب کریں۔
پوری ایپلی کیشن میں استعمال ہونے والے عناصر کے حوالہ جات محفوظ کرتا ہے۔
const uploadSection = document.getElementById("uploadSection");
const previewCanvas = document.getElementById("previewCanvas");
const previousButton = document.getElementById("previousPage");
const nextButton = document.getElementById("nextPage");
const rotateLeftButton = document.getElementById("rotateLeft");
const rotateRightButton = document.getElementById("rotateRight");
اپنے اسکرپٹ کے شروع میں حوالہ جات رکھنے سے آپ کے باقی کوڈ کو صاف ستھرا اور برقرار رکھنا آسان ہو جاتا ہے۔
پی ڈی ایف اپ لوڈ اور پیش نظارہ کریں۔
اپ لوڈ ایریا ڈریگ اینڈ ڈراپ اور مینوئل فائل سلیکشن دونوں کو سپورٹ کرتا ہے۔
دستاویز لوڈ کرنے سے پہلے، یقینی بنائیں کہ آپ جو فائل منتخب کرتے ہیں وہ دراصل پی ڈی ایف ہے۔
async function uploadPdf(file) {
if (!file || file.type !== "application/pdf") {
alert("Please choose a PDF file.");
return;
}
await loadPdf(file);
}
اگر توثیق کامیاب ہو جاتی ہے، تو دستاویز میموری میں لوڈ ہو جاتی ہے۔
پی ڈی ایف لوڈ کریں۔
اپ لوڈ کردہ فائل کو PDF.js کے ساتھ کھولنے سے پہلے ArrayBuffer میں تبدیل کریں۔
async function loadPdf(file) {
const bytes = await file.arrayBuffer();
pdfDocument = await pdfjsLib.getDocument({
data: bytes
}).promise;
currentPage = 1;
renderPage(currentPage);
}
ایک بار جب دستاویز کامیابی سے لوڈ ہو جائے گی، پہلا صفحہ خود بخود ظاہر ہو جائے گا۔
پی ڈی ایف پیج رینڈرنگ
ہر صفحہ کو HTML کینوس پر پیش کیا جاتا ہے۔
منتخب صفحہ کو تلاش کرتا ہے۔
const page = await pdfDocument.getPage(currentPage);
ویو پورٹ بنائیں۔
const viewport = page.getViewport({
scale: 1.5
});
کینوس کا سائز تبدیل کریں۔
previewCanvas.width = viewport.width;
previewCanvas.height = viewport.height;
صفحہ رینڈر کریں۔
await page.render({
canvasContext: previewCanvas.getContext("2d"),
viewport
}).promise;
تمام صفحات اب بالکل اسی طرح ظاہر ہوں گے جیسے وہ اصل پی ڈی ایف میں تھے۔
صفحات کے درمیان نیویگیشن
چونکہ زیادہ تر پی ڈی ایف فائلوں میں متعدد صفحات ہوتے ہیں، اس لیے صارفین کو سادہ نیویگیشن کنٹرولز کی ضرورت ہوتی ہے۔
موجودہ صفحہ محفوظ کرتا ہے۔
let currentPage = 1;
let pdfDocument = null;
پچھلے صفحے پر جائیں۔
previousButton.addEventListener("click", async () => {
if (currentPage > 1) {
currentPage--;
await renderPage(currentPage);
}
});
اگلے صفحے پر جائیں۔
nextButton.addEventListener("click", async () => {
if (currentPage < pdfDocument.numPages) {
currentPage++;
await renderPage(currentPage);
}
});
پیج کاؤنٹر کو اپ ڈیٹ کریں۔
pageIndicator.textContent = `Page ${currentPage} of ${pdfDocument.numPages}`;
صارفین اب فلٹرز شامل کرنے سے پہلے دستاویزات کو براؤز کر سکتے ہیں۔
پیش نظارہ کو گھمائیں۔
ایپلیکیشن میں پیش نظارہ گردش کنٹرول بھی شامل ہے۔ گردش صرف پیش نظارہ کو متاثر کرتی ہے، لہذا صارف فلٹر لگانے سے پہلے مختلف سمتوں سے صفحہ کا معائنہ کر سکتے ہیں۔
موجودہ گردش کا زاویہ ذخیرہ کرتا ہے۔
let rotation = 0;
بائیں مڑیں۔
rotateLeftButton.addEventListener("click", () => {
rotation -= 90;
renderPage(currentPage);
});
دائیں مڑیں۔
rotateRightButton.addEventListener("click", () => {
rotation += 90;
renderPage(currentPage);
});
ویو پورٹ بناتے وقت گردش کا اطلاق کریں۔
const viewport = page.getViewport({
scale: 1.5,
rotation
});
یہ کنٹرول اصل پی ڈی ایف میں ترمیم کیے بغیر آپ کے پیش نظارہ کے تجربے کو بہتر بناتے ہیں۔
فلٹر پینل بنائیں
فلٹر پینل پی ڈی ایف فلٹر اسٹوڈیو کا دل ہے۔ ایک ہی اثر کو لاگو کرنے کے بجائے، صارف فلٹر لیئرز کے ڈھیر بنا سکتے ہیں، متعدد ایڈجسٹمنٹ کو یکجا کر سکتے ہیں، اور حتمی پی ڈی ایف بنانے سے پہلے نتائج کا جائزہ لے سکتے ہیں۔
ہر فلٹر پرت ایک تصویر کی ایڈجسٹمنٹ کی نمائندگی کرتی ہے، جیسے چمک، برعکس، سنترپتی، دھندلاپن، دھندلاپن، گرے اسکیل، سیپیا، رنگ الٹنا، یا رنگ کی گردش۔
صارفین ایک کلک کے پیش سیٹ اثرات جیسے گرے اسکیل، سیپیا (ونٹیج)، الٹا (منفی)، تیز، چمک اور وِنیٹ بھی لگا سکتے ہیں۔
فلٹر پرت بنائیں
تمام ایڈجسٹمنٹ کو ہارڈ کوڈنگ کرنے کے بجائے، ہم فلٹرز کو ایک صف کے اندر اسٹور کرتے ہیں۔
const filters = [];
ہر فلٹر کی ایک متعلقہ قسم اور قدر ہوتی ہے۔
filters.push({
type: "brightness",
value: 120
});
یہ ڈھانچہ صارفین کو کسی بھی ترتیب میں متعدد فلٹرز کو یکجا کرنے کی اجازت دیتا ہے۔
نئی فلٹر پرت شامل کریں۔
صارف پہلے ڈراپ ڈاؤن سے فلٹر منتخب کرتا ہے اور پھر شامل کریں.
ڈراپ ڈاؤن بنائیں۔
اپنی پسند کا فلٹر شامل کریں۔
addButton.addEventListener("click", () => {
filters.push({
type: filterType.value,
value: 100
});
renderFilters();
});
ہر نیا فلٹر فلٹر لیئرز پینل کے اندر فوراً ظاہر ہوتا ہے۔
فلٹر پرتیں دکھائیں۔
ہر بار فلٹر شامل کرنے پر فلٹر کی فہرست کو دوبارہ بنائیں۔
function renderFilters() {
filterContainer.innerHTML = "";
filters.forEach(createFilterCard);
}
ہر فلٹر کارڈ پر مشتمل ہے:
-
فلٹر کا نام
-
قدر سلائیڈر
-
موجودہ قدر
-
حذف بٹن
یہ ڈیزائن متعدد ایڈجسٹمنٹ کا انتظام کرنا آسان بناتا ہے۔
فلٹر کی اقدار کو اپ ڈیٹ کریں۔
ہر پرت کا اپنا سلائیڈر ہوتا ہے۔
چمک کی مثالیں:
slider.addEventListener("input", event => {
filter.value = Number(event.target.value);
updatePreview();
});
جب بھی سلائیڈر تبدیل ہوتا ہے پیش نظارہ فوری طور پر تازہ ہوجاتا ہے۔
ایک ہی منطق کو تمام فلٹر اقسام کے لیے دوبارہ استعمال کیا جاتا ہے۔
مختلف فلٹر اقسام کی حمایت کرتا ہے۔
مختلف فلٹرز مختلف رینجز کا استعمال کرتے ہیں۔
const ranges = {
brightness: [0, 200],
contrast: [0, 200],
saturation: [0, 200],
blur: [0, 20],
opacity: [0, 100],
grayscale: [0, 100],
sepia: [0, 100],
invert: [0, 100],
hue: [0, 360]
};
یہ یقینی بناتا ہے کہ ہر ایڈجسٹمنٹ سب سے مناسب قیمت کا استعمال کرتی ہے۔
پیش سیٹ اثرات
کچھ صارفین دستی طور پر فلٹر لیئرز بنانے کے بجائے ایک کلک کے اثرات کو ترجیح دیتے ہیں۔
اس ایپلیکیشن میں کئی پیش سیٹ بٹن شامل ہیں۔
ہر پیش سیٹ خود بخود ایک یا زیادہ فلٹر لیئرز بناتا ہے۔
مثال کے طور پر، گرے اسکیل ہے:
function grayscalePreset() {
filters.length = 0;
filters.push({
type: "grayscale",
value: 100
});
updatePreview();
}
صارفین بعد میں بنائی گئی پرتوں میں ترمیم کر سکتے ہیں۔
مخصوص صفحات پر فلٹرز لگائیں۔
تمام صفحات کو یکساں اثر کی ضرورت نہیں ہے۔ صارف انتخاب کر سکتے ہیں کہ فلٹر کہاں لگانا ہے۔
صفحہ کے اختیارات بنائیں۔
Current page only
All pages
Specific pages
منتخب کردہ آپشن کو تلاش کریں۔
const pageMode = document.querySelector('input[name="pages"]:checked').value;
اگر صارف منتخب کرتا ہے۔ مخصوص صفحہصفحہ کی حد پڑھیں۔
const pageRange = document.getElementById("pageRange").value;
یہ صارفین کو صرف منتخب صفحات میں ترمیم کرنے اور باقی کو غیر تبدیل کرنے کی اجازت دیتا ہے۔
فلٹر پرت کو ہٹا دیں۔
صارف پروسیسنگ سے پہلے تمام فلٹرز کو حذف کر سکتے ہیں۔
ڈیلیٹ فنکشن بنائیں۔
function removeFilter(index) {
filters.splice(index, 1);
renderFilters();
updatePreview();
}
جب آپ کسی پرت کو ہٹاتے ہیں، تو پیش نظارہ فوری طور پر اپ ڈیٹ ہوجاتا ہے۔ یہ آپ کو تیزی سے اور بدیہی طور پر مختلف مجموعوں کے ساتھ تجربہ کرنے کی اجازت دیتا ہے۔
پی ڈی ایف صفحات پر فلٹرز لگائیں۔
اب اپ لوڈ کردہ پی ڈی ایف پر کارروائی کرنے کا وقت آگیا ہے۔
ایک بار جب صارف فلٹر لیئر کی تشکیل مکمل کر لیتا ہے، تو ایپلیکیشن تمام منتخب پی ڈی ایف صفحات کو HTML کینوس پر رینڈر کرتی ہے، ترتیب سے ترتیب شدہ فلٹرز کو لاگو کرتی ہے، اور PDF-lib کا استعمال کرتے ہوئے ایک نئی PDF تیار کرتی ہے۔
پچھلے پروجیکٹس کے برعکس جن میں صرف ایک اثر لاگو ہوتا ہے، یہ فلٹر اسٹوڈیو متعدد فلٹر پرتیں۔صارفین اپنی امیج پروسیسنگ پائپ لائن خود بنا سکتے ہیں۔
کینوس فلٹر سٹرنگ بنانا
HTML Canvas API آپ کو ایک فلٹر سٹرنگ میں متعدد فلٹرز کو یکجا کرنے کی اجازت دیتا ہے۔
ایک خالی تار سے شروع کریں۔
let filterString = "";
تمام فلٹر تہوں کے ذریعے دہرائیں۔
filters.forEach(filter => {
filterString += `${filter.type}
(${filter.value})
`;
});
ایک مکمل فلٹر سٹرنگ تفویض کرتا ہے۔
context.filter = filterString.trim();
صفحہ کو رینڈر کرنے سے پہلے تمام فعال پرتیں اب یکجا ہو گئی ہیں۔
فلٹر شدہ صفحات کھینچنا
فلٹر سٹرنگ بننے کے بعد، پیش کردہ پی ڈی ایف صفحہ دوبارہ تیار کیا جاتا ہے۔
context.drawImage(pdfCanvas, 0, 0);
کینوس اب صفحہ کا فلٹر شدہ ورژن پر مشتمل ہے۔
یہ نقطہ نظر آپ کو ایک ہی رینڈرنگ پاس میں متعدد ایڈجسٹمنٹ لاگو کرنے کی اجازت دیتا ہے۔
متعدد فلٹر پرتیں لگائیں۔
تمام ایڈجسٹمنٹ اندرونی طور پر ذخیرہ کیے جاتے ہیں، لہذا فلٹر انتظامات صارفین کو مطلوبہ اثرات کو یکجا کرنے کی اجازت دیتے ہیں۔
مثال کے طور پر:
filters = [
{
type: "brightness",
value: "130%"
},
{
type: "contrast",
value: "115%"
},
{
type: "blur",
value: "5px"
}
];
رینڈرنگ سے پہلے یہ فلٹرز خود بخود ایک کینوس فلٹر سٹرنگ میں مل جاتے ہیں۔
یہ آپ کے کوڈ کو سادہ رکھتے ہوئے آپ کی درخواست کو لچکدار بناتا ہے۔
پیش سیٹ اثرات کا اطلاق کریں۔
پیش سیٹ بٹن موجودہ فلٹر لسٹ کو پہلے سے طے شدہ اقدار سے بدل دیتا ہے۔
سیپیا پیش سیٹ کی مثال:
filters = [
{
type: "sepia",
value: "100%"
}
];
updatePreview();
اسی طرح چمک پیش سیٹ چمک اور دھندلاپن کو یکجا کر سکتے ہیں۔
filters = [
{
type: "brightness",
value: "125%"
},
{
type: "blur",
value: "2px"
}
];
پیش سیٹ اثرات بعد میں دستی ایڈجسٹمنٹ کی اجازت دیتے ہوئے صارفین کا وقت بچاتے ہیں۔
منتخب صفحات پر کارروائی کریں۔
فلٹر کے تیار ہونے کے بعد، یہ صرف صارف کے منتخب کردہ صفحات پر کارروائی کرے گا۔
for (const page of selectedPages) {
await processPage(page);
}
اگر صرف موجودہ صفحہ منتخب ہونے پر، صرف فعال صفحہ پر کارروائی کی جائے گی۔
اگر تمام صفحات اگر منتخب کیا جاتا ہے تو، لوپ دستاویز کے تمام صفحات پر کارروائی کرے گا۔
اگر صارف حسب ضرورت صفحہ نمبر بتاتا ہے، تو صرف وہی صفحہ فلٹر کیا جائے گا۔
فلٹر لگائیں۔
صارفین پروسیسنگ شروع کرنے کے لیے کلک کریں۔ پی ڈی ایف پر فلٹرز لگائیں۔.
ایک ایکشن بٹن بنائیں۔
پروسیسنگ شروع ہوتی ہے۔
applyFilters.addEventListener("click", async () => {
await generatePdf();
});
پروسیسنگ کے دوران، صارف کو یہ بتانے کے لیے کہ ایپلیکیشن کام کر رہی ہے ایک لوڈنگ انڈیکیٹر ڈسپلے کریں۔
حتمی پی ڈی ایف بنائیں
ایک نیا پی ڈی ایف دستاویز بنائیں۔
const outputPdf = await PDFLib.PDFDocument.create();
فلٹر شدہ کینوس کو تصویر میں تبدیل کریں۔
const imageBytes = await canvasToBytes(previewCanvas);
ایک تصویر داخل کریں۔
const image = await outputPdf.embedPng(imageBytes);
ایک صفحہ بنائیں۔
const page = outputPdf.addPage([
image.width,
image.height
]);
پروسیس شدہ تصویر کھینچیں۔
page.drawImage(image, {
x: 0,
y: 0,
width: image.width,
height: image.height
});
اس عمل کو اس وقت تک دہرائیں جب تک کہ تمام منتخب صفحات نئے پی ڈی ایف میں شامل نہ ہوجائیں۔
پی ڈی ایف کو محفوظ کریں۔
تمام صفحات پر کارروائی ہونے کے بعد، مکمل شدہ دستاویز کو محفوظ کریں۔
const pdfBytes = await outputPdf.save();
ڈاؤن لوڈ کے قابل فائل بناتا ہے۔
generatedPdf = new Blob([pdfBytes], {
type: "application/pdf"
});
اب آپ تیار کردہ پی ڈی ایف کا پیش نظارہ اور ڈاؤن لوڈ کر سکتے ہیں۔
فلٹر شدہ دستاویز کا پیش نظارہ
ڈاؤن لوڈ کرنے سے پہلے، ایپلیکیشن پروسیس شدہ پی ڈی ایف دکھاتی ہے تاکہ صارف دیکھ سکیں کہ کون سے فلٹرز لگائے گئے ہیں۔
پیش نظارہ میں صفحہ نیویگیشن اور روٹیشن کنٹرولز شامل ہیں تاکہ آپ فائل کو محفوظ کرنے سے پہلے حتمی نتیجہ کا بآسانی معائنہ کر سکیں۔
دوبارہ شروع کریں
اگر صارفین دیگر دستاویزات پر کارروائی کرنا چاہتے ہیں تو وہ ایک کلک سے ایپلیکیشن کو دوبارہ ترتیب دے سکتے ہیں۔
resetButton.addEventListener("click", () => {
location.reload();
});
دوبارہ لوڈ کرنے سے اپ لوڈ کردہ پی ڈی ایف صاف ہو جاتی ہے، تمام فلٹر لیئرز ہٹ جاتی ہیں، پہلے سے سیٹ اثرات کو دوبارہ سیٹ کیا جاتا ہے، اور ایپلیکیشن کو ابتدائی اپ لوڈ اسکرین پر واپس کر دیا جاتا ہے۔
نتائج کا پیش نظارہ کریں۔
ہم تجویز کرتے ہیں کہ آپ اپنے صارفین سے ترمیم شدہ دستاویز کو ڈاؤن لوڈ کرنے سے پہلے پروسیس شدہ پی ڈی ایف کا جائزہ لیں۔ یہ آپ کو یہ چیک کرنے کی اجازت دیتا ہے کہ تمام منتخب فلٹرز درست طریقے سے لاگو ہوئے ہیں اور اگر ضروری ہو تو ایڈجسٹمنٹ کریں۔
تخلیق شدہ پی ڈی ایف لوڈ کریں۔
let finalPdf = null;
async function showPreview() {
const bytes = await generatedPdf.arrayBuffer();
finalPdf = await pdfjsLib.getDocument({
data: bytes
}).promise;
renderPreviewPage(1);
}
منتخب صفحہ کو رینڈر کرتا ہے۔
async function renderPreviewPage(pageNumber) {
const page = await finalPdf.getPage(pageNumber);
const viewport = page.getViewport({
scale: 1.5
});
previewCanvas.width = viewport.width;
previewCanvas.height = viewport.height;
await page.render({
canvasContext: previewCanvas.getContext("2d"),
viewport
}).promise;
}
صارفین مکمل شدہ پی ڈی ایف ڈاؤن لوڈ کرنے سے پہلے تمام پروسیس شدہ صفحات کو براؤز کر سکتے ہیں۔
نام تبدیل کریں اور ڈاؤن لوڈ کریں۔
تیار کردہ پی ڈی ایف کو محفوظ کرنے سے پہلے، صارف اپنی مرضی کے مطابق فائل کا نام منتخب کر سکتے ہیں۔
فائل کا نام ان پٹ بنائیں۔
فائل کا نام تلاش کریں۔
function getFilename() {
let filename = outputFilename.value.trim();
if (!filename) {
filename = "filtered-document.pdf";
}
if (!filename.toLowerCase().endsWith(".pdf")) {
filename += ".pdf";
}
return filename;
}
تیار کردہ پی ڈی ایف کے بارے میں مفید معلومات دکھاتا ہے۔
pageCount.textContent = `${finalPdf.numPages} Pages`;
fileSize.textContent = formatFileSize(generatedPdf.size);
دستاویز ڈاؤن لوڈ کریں۔
downloadButton.addEventListener("click", () => {
const url = URL.createObjectURL(generatedPdf);
const link = document.createElement("a");
link.href = url;
link.download = getFilename();
link.click();
URL.revokeObjectURL(url);
});
سب کچھ مقامی طور پر براؤزر کے اندر ہوتا ہے، جو آپ کے دستاویزات کی حفاظت اور اپ لوڈ کے اوقات کو کم کرنے میں مدد کرتا ہے۔
ڈیمو: پی ڈی ایف فلٹر اسٹوڈیو کیسے کام کرتا ہے۔
پورا ورک فلو صرف چند مراحل پر مشتمل ہے۔
مرحلہ 1: پی ڈی ایف اپ لوڈ کریں۔
صارفین پی ڈی ایف کو اپ لوڈ ایریا میں گھسیٹ سکتے ہیں یا پی ڈی ایف منتخب کریں۔.
مرحلہ 2: اپنے پی ڈی ایف کا جائزہ لیں۔
اپ لوڈ کردہ دستاویزات کو صفحہ کے لحاظ سے استعمال کرتے ہوئے پیش کیا جاتا ہے: PDF.js. صارفین دستاویزات کو نیویگیٹ کر سکتے ہیں اور ترمیم کرنے سے پہلے صفحات کو گھما سکتے ہیں۔
مرحلہ 3: فلٹر کو ترتیب دیں۔
صارفین ایک یا زیادہ فلٹر لیئرز بناتے ہیں، چمک، کنٹراسٹ، سیچوریشن، بلر، اوپیسٹی، گرے اسکیل، سیپیا، کلر انورسیشن، ہیو روٹیشن کو ایڈجسٹ کرتے ہیں یا پہلے سے سیٹ اثرات کا اطلاق کرتے ہیں۔
مرحلہ 4: فلٹرز لگائیں۔
کلک کریں پی ڈی ایف پر فلٹرز لگائیں۔ منتخب صفحہ پر کارروائی کریں۔
مرحلہ 5: نتائج کا جائزہ لیں۔
مکمل شدہ پی ڈی ایف حتمی تصدیق کے لیے پیش نظارہ ونڈو میں ظاہر ہوگی۔
مرحلہ 6: نام تبدیل کریں اور ڈاؤن لوڈ کریں۔
آخر میں، صارف اگر ضروری ہو تو آؤٹ پٹ فائل کا نام تبدیل کر سکتے ہیں، صفحہ کی گنتی اور فائل کے سائز کا جائزہ لے سکتے ہیں، اور ترمیم شدہ پی ڈی ایف ڈاؤن لوڈ کر سکتے ہیں۔
کارکردگی کی تجاویز
ہائی ریزولوشن پی ڈی ایف صفحات پر متعدد فلٹرز لگانے سے پروسیسنگ کا وقت بڑھ سکتا ہے۔ ہر بار پوری دستاویز پر کارروائی کرنے کے بجائے صرف منتخب صفحات پر کارروائی کریں۔
for (const page of selectedPages) {
await processPage(page);
}
کینوس فلٹر سٹرنگز صرف اس وقت بنائیں جب فلٹر کی قدر تبدیل ہو جائے، بجائے اس کے کہ آپ ہر بار رینڈر کرتے وقت انہیں دوبارہ بنائیں۔
context.filter = buildFilterString(filters);
مکمل دستاویز کو ڈاؤن لوڈ کرنے کے بعد عارضی آبجیکٹ URLs کو آزاد کرکے میموری کو خالی کریں۔
URL.revokeObjectURL(downloadUrl);
یہ اصلاحیں بڑی، کثیر صفحاتی پی ڈی ایف دستاویزات کے ساتھ کام کرتے ہوئے بھی ایپلیکیشن کو جوابدہ رکھنے میں مدد کرتی ہیں۔
عام غلطیاں
ایک عام غلطی پہلے سے فلٹر شدہ کینوس کے اوپر فلٹر شدہ صفحہ بنانا ہے۔ نئی فلٹر کنفیگریشن لگانے سے پہلے ہمیشہ اصل پی ڈی ایف پیج کو رینڈر کریں۔
await renderPage(currentPage);
ایک اور مسئلہ پروسیسنگ کے بعد کینوس فلٹر کو ری سیٹ کرنا بھول جانا ہے۔
context.filter = "none";
آخر میں، بہت زیادہ بھاری فلٹرز جیسے دھندلا، چمک، اور متعدد کنٹراسٹ ایڈجسٹمنٹ کو اسٹیک کرنا پروسیسنگ کا وقت بڑھا سکتا ہے اور غیر متوقع بصری نتائج کا باعث بن سکتا ہے۔ صرف ان فلٹرز کو لاگو کرنے سے جن کی آپ کو درحقیقت ضرورت ہوتی ہے عام طور پر کلینر آؤٹ پٹ اور بہتر کارکردگی کا نتیجہ ہوتا ہے۔
نتیجہ
اس ٹیوٹوریل میں، ہم نے جاوا اسکرپٹ کا استعمال کرتے ہوئے براؤزر پر مبنی پی ڈی ایف فلٹر اسٹوڈیو بنایا ہے۔
آپ نے پی ڈی ایف دستاویز کو اپ لوڈ کرنے کا طریقہ سیکھا، PDF.js کے ساتھ صفحہ کو رینڈر کرنا، دوبارہ قابل استعمال فلٹر لیئرز بنانا، چمک، کنٹراسٹ، سیچوریشن، بلر، اوپیسٹی، گرے اسکیل، سیپیا، کلر انورسیشن، اور ہیو روٹیشن ایفیکٹس کا اطلاق کرنا، کینوس API کا استعمال کرتے ہوئے، PDF-lib کے ساتھ ایک نئی PDF بنائیں، اپنے براؤزر سے براہ راست دستاویز کا پیش منظر دیکھیں، فائل کو دوبارہ ڈاؤن لوڈ کریں، فائل کا دوبارہ جائزہ لیں۔
واحد مقصدی پی ڈی ایف ایڈیٹنگ ٹولز کے برعکس، یہ پروجیکٹ صارفین کو تمام پروسیسنگ کو براؤزر کے لیے مقامی رکھتے ہوئے ایک لچکدار ایڈیٹنگ ورک فلو میں متعدد بصری اثرات کو یکجا کرنے کی اجازت دیتا ہے۔
آپ پی ڈی ایف فلٹر اسٹوڈیو کا استعمال کرکے پورے ورک فلو کو تلاش کرسکتے ہیں۔
یہاں سے، آپ اپنی مرضی کے مطابق فلٹر پرسیٹس، AI سے چلنے والی امیج اینہانسمنٹس، سلیکشن فلٹرز، واٹر مارک اوورلیز، یا بیچ پروسیسنگ کے ساتھ ایپلی کیشن کو بڑھا سکتے ہیں تاکہ ایک اور بھی زیادہ طاقتور براؤزر پر مبنی PDF ایڈیٹر بنایا جا سکے۔