بعض اوقات آپ پی ڈی ایف کے اصل مواد کو تبدیل نہیں کرنا چاہتے۔ اپنی دستاویز کے حصے یا تمام حصے میں بس رنگ کی پرت شامل کریں۔
یہ برانڈ رپورٹس بنانے، رنگین پس منظر شامل کرنے، پرنٹ شدہ کاپی کو نمایاں کرنے، ڈیزائن ماک اپ بنانے، واٹر مارک کلر ایفیکٹس لگانے، یا پریزنٹیشنز کے لیے دستاویزات کی تیاری کے لیے مفید ہو سکتا ہے۔
پی ڈی ایف کلر اوورلے ٹول پی ڈی ایف پیج پر نیم شفاف رنگ کی تہہ رکھ کر اس کے نیچے اصل متن، تصاویر اور لے آؤٹ کو برقرار رکھتے ہوئے یہ ممکن بناتا ہے۔
گرافک ڈیزائن سافٹ ویئر میں ہر صفحے کو دستی طور پر ایڈٹ کرنے کے بجائے، صارف پی ڈی ایف اپ لوڈ کر سکتے ہیں، اوورلے رنگ کا انتخاب کر سکتے ہیں، شفافیت کو ایڈجسٹ کر سکتے ہیں، بلینڈنگ موڈ کا انتخاب کر سکتے ہیں، فیصلہ کر سکتے ہیں کہ اسے کہاں ڈسپلے کرنا ہے، نتائج کا پیش نظارہ کرنا ہے، اور ایک اپ ڈیٹ شدہ دستاویز ڈاؤن لوڈ کر سکتے ہیں۔
اس ٹیوٹوریل میں، ہم جاوا اسکرپٹ کا استعمال کرتے ہوئے یہ ٹول بناتے ہیں۔ صارف پی ڈی ایف اپ لوڈ کر سکتے ہیں اور سرور کو دستاویزات بھیجے بغیر صرف ذکر کردہ تمام کارروائیاں انجام دے سکتے ہیں۔
انڈیکس
پی ڈی ایف کلر اوورلے ٹول ایک یا زیادہ صفحات پر رنگ کی پرت کو لاگو کرتا ہے جبکہ نیچے اصل پی ڈی ایف مواد ڈسپلے کرتا ہے۔ کلر انورٹرز یا گرے اسکیل کنورٹرز کے برعکس، جو ہر پکسل کو مستقل طور پر تبدیل کرتے ہیں، کلر اوورلیز موجودہ صفحہ کے ساتھ منتخب رنگوں کو ملانے کے لیے ایڈجسٹ شفافیت اور ملاوٹ کے طریقوں کا استعمال کرتے ہیں۔
یہ برانڈڈ دستاویزات بنانے، رنگین پس منظر شامل کرنے، پیشکشوں کے لیے پی ڈی ایف بنانے، سیکشنز کو نمایاں کرنے، تھیمڈ رپورٹس بنانے، یا اصل ماخذ دستاویز میں ترمیم کیے بغیر پیش نظارہ ورژن بنانے کے لیے مفید ہے۔
اس پروجیکٹ میں، صارفین پی ڈی ایف اپ لوڈ کر سکتے ہیں، تمام صفحات کا جائزہ لے سکتے ہیں، کلر چننے والے یا ہیکساڈیسیمل اقدار کا استعمال کرتے ہوئے اوورلے کا رنگ منتخب کر سکتے ہیں، اوورلے کی دھندلاپن کو ایڈجسٹ کر سکتے ہیں، بلینڈنگ موڈ کو منتخب کر سکتے ہیں، اوورلے کہاں ظاہر ہو گا، اس بات کا تعین کر سکتے ہیں کہ کون سے صفحات پر اثر ملے گا، اپ ڈیٹ شدہ دستاویز کا پیش نظارہ کریں، اور مکمل شدہ PDF کو براہ راست براؤزر سے ڈاؤن لوڈ کر سکتے ہیں۔
اندرونی طور پر PDF.js ہر صفحہ کو HTML کینوس پر رینڈر کریں۔ JavaScript پھر منتخب شفافیت اور بلینڈنگ موڈ کا استعمال کرتے ہوئے پیش کردہ صفحہ پر ایک رنگین مستطیل کھینچتا ہے۔ تمام منتخب صفحات پر کارروائی ہونے کے بعد، PDF-lib اپ ڈیٹ شدہ صفحات کو ایک نئے ڈاؤن لوڈ کے قابل PDF میں جمع کرتا ہے۔
اوورلے رنگوں کا اظہار ہیکسا ڈیسیمل اقدار کا استعمال کرتے ہوئے کیا جاتا ہے۔
const overlay = {
color: "#667eea",
opacity: 0.5
};
اوورلے ڈرائنگ کرتے وقت، JavaScript پہلے شفافیت کی سطح کو سیٹ کرتا ہے۔
context.globalAlpha = overlay.opacity;
اگلا، منتخب رنگ لاگو کیا جاتا ہے.
context.fillStyle = overlay.color;
آخر میں، مطلوبہ علاقے پر ایک رنگین مستطیل کھینچا جاتا ہے۔
context.fillRect(0, 0, canvas.width, canvas.height);
آپ کے منتخب کردہ بلینڈنگ موڈ پر منحصر ہے، اوورلیز آپ کے دستاویز کو آہستہ سے رنگ سکتے ہیں، گہرے رنگ بنا سکتے ہیں، ڈرامائی روشنی کے اثرات پیدا کر سکتے ہیں، یا اصل صفحہ کو نیچے محفوظ رکھتے ہوئے بالکل مختلف بصری انداز تخلیق کر سکتے ہیں۔
پروجیکٹ کی ترتیبات
اوورلے فعالیت کو لاگو کرنے سے پہلے، آئیے ایک سادہ پروجیکٹ ڈھانچہ بنائیں۔
PDF.js، Canvas API، اور PDF-lib کے ساتھ HTML، CSS، اور JavaScript کا استعمال کرتے ہوئے ایپلیکیشنز بنائیں۔
ہمارے منصوبے کا ڈھانچہ مندرجہ ذیل ہے:
pdf-color-overlay/
│── index.html
│── style.css
│── script.js
│── pdf.worker.min.js
│── assets/
ایچ ٹی ایم ایل، سی ایس ایس، اور جاوا اسکرپٹ کو الگ کرنا آپ کے پروجیکٹ کو منظم رکھتا ہے اور مستقبل میں ہونے والی بہتری کو لاگو کرنا آسان بناتا ہے۔
استعمال شدہ لائبریریاں
پی ڈی ایف کلر اوورلے ٹول تین براؤزر ٹیکنالوجیز کا استعمال کرتا ہے جو پی ڈی ایف پیجز کو رینڈر کرنے، کلر اوورلے لگانے، اور نئی ڈاؤن لوڈ کے قابل دستاویزات بنانے کے لیے مل کر کام کرتی ہے۔
PDF.js پی ڈی ایف صفحات کو براہ راست اپنے براؤزر میں رینڈر کریں۔
کہ HTML کینوس API شفافیت اور ملاوٹ کے طریقوں کا استعمال کرتے ہوئے ہر پیش کردہ صفحہ پر ایک رنگ اوورلے کھینچتا ہے۔
PDF-lib تمام منتخب صفحات پر کارروائی کے بعد، حتمی پی ڈی ایف تیار ہو جاتی ہے۔
اپنی درخواست لوڈ کرنے سے پہلے مطلوبہ لائبریریاں شامل کریں۔
PDF.js ورکر کو کنفیگر کریں۔
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://www.freecodecamp.org/news/build-pdf-color-overlay-tool-javascript/pdf.worker.min.js";
کارکنان پی ڈی ایف رینڈرنگ کو پس منظر میں ہونے دیتے ہیں، بڑی پی ڈی ایف فائلوں کو کھولتے وقت بھی انٹرفیس کو ریسپانسیو رکھتے ہیں۔
ایک HTML لے آؤٹ بنائیں
درخواست کو چار اہم حصوں میں تقسیم کیا گیا ہے:
-
اپ لوڈ کے علاقے
-
پی ڈی ایف پیش نظارہ
-
اوورلے کی ترتیبات
-
سیکشن ڈاؤن لوڈ کریں۔
ایک بنیادی ترتیب بنائیں۔
ابتدائی طور پر، صرف اپ لوڈ کا علاقہ ظاہر ہوتا ہے۔ پی ڈی ایف کے کامیابی سے لوڈ ہونے کے بعد، باقی حصے ظاہر ہوں گے۔
کلیدی عناصر کو منتخب کریں۔
پوری ایپلی کیشن میں استعمال ہونے والے عناصر کے حوالہ جات محفوظ کرتا ہے۔
const uploadSection = document.getElementById("uploadSection");
const previewSection = document.getElementById("previewSection");
const settingsSection = document.getElementById("settingsSection");
const pdfCanvas = document.getElementById("pdfCanvas");
یہ حوالہ جات ایپلیکیشن کو DOM کو بار بار تلاش کیے بغیر انٹرفیس کو اپ ڈیٹ کرنے کی اجازت دیتے ہیں۔
پی ڈی ایف اپ لوڈ اور پیش نظارہ کریں۔
اپ لوڈ ایریا ڈریگ اینڈ ڈراپ اور مینوئل فائل سلیکشن دونوں کو سپورٹ کرتا ہے۔
دستاویز لوڈ کرنے سے پہلے، یقینی بنائیں کہ منتخب فائل پی ڈی ایف ہے۔
async function uploadPdf(file) {
if (!file || file.type !== "application/pdf") {
alert("Please select 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);
}
جب دستاویز کامیابی سے لوڈ ہو جاتی ہے، تو پہلا صفحہ خود بخود رینڈر ہو جاتا ہے۔
پی ڈی ایف پیج رینڈرنگ
PDF.js HTML کینوس پر ایک وقت میں ایک صفحہ پیش کرتا ہے۔
منتخب صفحہ کو تلاش کرتا ہے۔
const page = await pdfDocument.getPage(currentPage);
ویو پورٹ بنائیں۔
const viewport = page.getViewport({
scale: 1.5
});
کینوس کا سائز تبدیل کریں۔
pdfCanvas.width = viewport.width;
pdfCanvas.height = viewport.height;
صفحہ رینڈر کریں۔
await page.render({
canvasContext: pdfCanvas.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);
}
});
صفحہ کے اشارے کو اپ ڈیٹ کریں۔
pageCounter.textContent = `Page ${currentPage} of ${pdfDocument.numPages}`;
رنگین اوورلیز کو لاگو کرنے کا طریقہ طے کرنے سے پہلے صارفین اب اپ لوڈ کردہ پی ڈی ایف کو تلاش کر سکتے ہیں۔
اوورلے سیٹ اپ بنانا
پی ڈی ایف کو اپ لوڈ کرنے اور پیش نظارہ کرنے کے بعد، صارف کنفیگر کر سکتے ہیں کہ رنگوں کے اوورلیز کو کس طرح لاگو کیا جاتا ہے۔ سیٹنگز پینل صارفین کو اوورلے کا رنگ منتخب کرنے، شفافیت کو ایڈجسٹ کرنے، بلینڈنگ موڈ کو منتخب کرنے، یہ بتانے کی اجازت دیتا ہے کہ اوورلے کہاں ظاہر ہوگا، اور حتمی پی ڈی ایف بنانے سے پہلے کن صفحات کو اثر حاصل کرنا چاہیے۔
اوورلے رنگ منتخب کریں۔
پہلی ترتیب صارفین کو پی ڈی ایف پر رکھنے کے لیے رنگ منتخب کرنے کی اجازت دیتی ہے۔
ایپلیکیشن رنگ چننے والوں اور براہ راست ہیکساڈیسیمل ان پٹ دونوں کو سپورٹ کرتی ہے۔
رنگ چننے والا بنائیں۔
ہیکساڈیسیمل ان پٹ تیار کرتا ہے۔
منتخب کردہ رنگ تلاش کریں۔
const overlayColor = document.getElementById("overlayColor").value;
اگر آپ کے صارف دستی طور پر ہیکساڈیسیمل اقدار درج کرتے ہیں، تو انہیں اپنے رنگ چننے والے کے ساتھ ہم آہنگ کریں۔
hexValue.addEventListener("input", () => {
overlayColor.value = hexValue.value;
});
آپ جو رنگ منتخب کرتے ہیں وہ بعد میں پیش کردہ پی ڈی ایف صفحہ پر کھینچا جائے گا۔
دھندلاپن ایڈجسٹمنٹ
دھندلاپن کنٹرول کرتا ہے کہ اوورلے کتنا شفاف دکھائی دیتا ہے۔
نچلی قدریں اصل پی ڈی ایف کو زیادہ دکھاتی ہیں، جبکہ اعلیٰ قدریں مضبوط رنگین اثرات پیدا کرتی ہیں۔
ایک اوپیسٹی سلائیڈر بنائیں۔
منتخب قدر کی تلاش۔
const opacity = Number(document.getElementById("opacity").value) / 100;
یہ قدر بعد میں اوورلے ڈرائنگ سے پہلے کینوس کی شفافیت کو تفویض کی جاتی ہے۔
بلینڈ موڈ کو منتخب کریں۔
بلینڈنگ موڈ اس بات کا تعین کرتا ہے کہ اوورلے رنگ اصل پی ڈی ایف مواد کے ساتھ کیسے تعامل کرتا ہے۔
ڈراپ ڈاؤن بنائیں۔
منتخب کردہ بلینڈ موڈ کو بازیافت کرتا ہے۔
const blendMode = document.getElementById("blendMode").value;
دستاویز کو اوورلے کے نیچے رکھتے ہوئے ہر بلینڈ موڈ ایک مختلف بصری اثر پیدا کرتا ہے۔
اوورلے مقام منتخب کریں۔
اوورلیز کو ہمیشہ پورے صفحے کا احاطہ کرنے کی ضرورت نہیں ہے۔ صارفین صرف مخصوص علاقوں میں درخواست دے سکتے ہیں اگر وہ چاہیں۔
دستیاب اختیارات بنائیں۔
Full Page
Header Only
Footer Only
منتخب کردہ مقام تلاش کریں۔
const position = document.querySelector('input[name="position"]:checked').value;
پروسیسنگ کے دوران، ایپلیکیشن صرف منتخب علاقے کے اندر ہی اوورلے کو کھینچتی ہے۔
کارروائی کے لیے صفحات منتخب کریں۔
صارفین کئی طریقوں سے اوورلیز کا اطلاق کر سکتے ہیں۔
صفحہ انتخاب کنٹرول بنائیں۔
Current page only
All pages
Separate overlay per page
Specific pages
منتخب کردہ آپشن کو تلاش کریں۔
const pageMode = document.querySelector('input[name="pages"]:checked').value;
حسب ضرورت صفحہ کی حد پڑھتا ہے۔
const pageRange = document.getElementById("pageRange").value.trim();
یہ لچک صارفین کو دستاویز کے لحاظ سے مختلف اوورلے حکمت عملیوں کو لاگو کرنے کی اجازت دیتی ہے۔
اوورلے لگائیں۔
تمام ترتیبات کنفیگر ہونے کے بعد، صارفین پی ڈی ایف پر کارروائی شروع کر سکتے ہیں۔
ایک ایکشن بٹن بنائیں۔
پروسیسنگ ورک فلو شروع کریں۔
applyOverlay.addEventListener("click", async () => {
await processOverlay();
});
دوبارہ شروع کریں
صارفین کسی بھی وقت ایپلیکیشن کو دوبارہ ترتیب دے سکتے ہیں اور دوسری دستاویز اپ لوڈ کر سکتے ہیں۔
ایک ری سیٹ بٹن بنائیں۔
ٹول کو ری سیٹ کریں۔
resetTool.addEventListener("click", () => {
location.reload();
});
اپ لوڈ ایریا دوبارہ ظاہر ہو جائے گا تاکہ آپ تمام سیٹنگز کو دستی طور پر صاف کیے بغیر کسی اور پی ڈی ایف پر کارروائی کر سکیں۔
پی ڈی ایف صفحات پر کلر اوورلیز لگائیں۔
اب آئیے پی ڈی ایف پیجز پر کلر اوورلیز شامل کرتے ہیں، جو کہ ایپلی کیشن کی اہم خصوصیت ہے۔
یہ عمل PDF.js کا استعمال کرتے ہوئے ہر منتخب پی ڈی ایف صفحہ کو ایچ ٹی ایم ایل کینوس پر پیش کرنے کے ساتھ شروع ہوتا ہے۔ JavaScript پھر منتخب ملاوٹ کے موڈ کا استعمال کرتے ہوئے صفحہ پر ایک شفاف رنگ کا مستطیل کھینچتا ہے۔ تمام منتخب صفحات پر کارروائی ہوجانے کے بعد، PDF-lib ایک نیا ڈاؤن لوڈ کے قابل PDF بناتا ہے۔
اوورلے رنگ لگائیں۔
کچھ بھی ڈرائنگ کرنے سے پہلے، اپنے منتخب کردہ رنگ کو تلاش کریں۔
const overlayColor = document.getElementById("overlayColor").value;
کینوس فل کلر سیٹ کرتا ہے۔
context.fillStyle = overlayColor;
یہ رنگ ہر پی ڈی ایف صفحہ کے منتخب حصے پر کھینچا جاتا ہے۔
اوورلے شفافیت کی ترتیبات
دھندلاپن اس بات کا تعین کرتا ہے کہ اوورلے کے نیچے اصل صفحہ کا کتنا حصہ نظر آتا ہے۔
منتخب شفافیت کا اطلاق کرتا ہے۔
context.globalAlpha = opacity;
کم دھندلاپن باریک ٹونز بناتا ہے، جب کہ اعلی اقدار ایک مضبوط بصری اثر پیدا کرتی ہیں۔
بلینڈ موڈ کا اطلاق کریں۔
کینوس متعدد کمپوزٹنگ طریقوں کو سپورٹ کرتا ہے جو اس بات کا تعین کرتے ہیں کہ اوورلے موجودہ صفحہ کے ساتھ کیسے تعامل کرتا ہے۔
منتخب کردہ بلینڈ موڈ کو تفویض کرتا ہے۔
context.globalCompositeOperation = blendMode;
کچھ عام موڈ یہ ہیں:
-
عام - رنگ کو دائیں صفحے پر رکھیں۔
-
ضرب - ایک گہرا نظر پیدا کرتا ہے۔
-
چادر - مجموعی تضاد کو بڑھاتا ہے۔
-
نرم روشنی - ایک نرم روشنی کا اثر پیدا کرتا ہے۔
-
سخت روشنی - تضاد مضبوط ہو جاتا ہے۔
-
فرق - رنگ کے فرق کی بنیاد پر ایک الٹی طرز کی ظاہری شکل بنائیں۔
اوورلے ڈرا کریں۔
رنگ، دھندلاپن، اور بلینڈ موڈ کو ترتیب دینے کے بعد، کینوس پر اوورلے ڈرا کریں۔
مکمل صفحہ اوورلے کے لیے:
context.fillRect(0, 0, canvas.width, canvas.height);
اگر صارف منتخب کرتا ہے۔ صرف ہیڈرصرف اوپر والے حصے میں ایک مستطیل کھینچیں۔
context.fillRect(0, 0, canvas.width, 120);
کے لیے صرف فوٹرصفحہ کے نیچے کے قریب ایک اوورلے بنائیں۔
context.fillRect(0, canvas.height - 120, canvas.width, 120);
یہ اختیارات آپ کو بنیادی پی ڈی ایف مواد میں ترمیم کیے بغیر مختلف اوورلے اسٹائل استعمال کرنے کی اجازت دیتے ہیں۔
منتخب صفحات پر کارروائی کریں۔
اوورلے کو ترتیب دینے کے بعد، یہ صرف صارف کے منتخب کردہ صفحات پر کارروائی کرے گا۔
منتخب صفحات کو دہراتا ہے۔
for (let page = startPage; page <= endPage; page++) {
await processPage(page);
}
حتمی دستاویز بنانے سے پہلے ہر پروسیس شدہ صفحہ کو عارضی طور پر محفوظ کیا جاتا ہے۔
اگر صرف موجودہ صفحہ منتخب ہونے پر، صرف فعال صفحہ پر کارروائی کی جائے گی۔ اگر تمام صفحات منتخب ہونے پر، اوورلے پوری دستاویز پر لاگو ہوگا۔
حتمی پی ڈی ایف بنائیں
ایک نیا پی ڈی ایف دستاویز بنائیں۔
const outputPdf = await PDFLib.PDFDocument.create();
پروسیس شدہ کینوس کو تصویر میں تبدیل کریں۔
const imageBytes = await canvasToBytes(pdfCanvas);
ایک تصویر داخل کریں۔
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();
ڈاؤن لوڈ کے قابل فائل بنائیں۔
generatedPdfBlob = new Blob([pdfBytes], {
type: "application/pdf"
});
اب آپ اپنے نئے پی ڈی ایف کو منتخب رنگ کے اوورلے کے ساتھ پیش کر سکتے ہیں۔
نتائج کا پیش نظارہ کریں۔
پروسیس شدہ دستاویزات کو ڈاؤن لوڈ کرنے سے پہلے، صارفین کو حتمی آؤٹ پٹ کا جائزہ لینے کے قابل ہونا چاہیے۔ یہ اس بات کی تصدیق کرنا آسان بناتا ہے کہ آپ کا منتخب کردہ رنگ، دھندلاپن، بلینڈنگ موڈ، اور صفحہ کا انتخاب درست طریقے سے لاگو کیا گیا ہے۔
تخلیق شدہ پی ڈی ایف لوڈ کریں۔
let finalPdf = null;
async function showPreview() {
const bytes = await generatedPdfBlob.arrayBuffer();
finalPdf = await pdfjsLib.getDocument({
data: bytes
}).promise;
renderFinalPage(1);
}
منتخب صفحہ کو رینڈر کرتا ہے۔
async function renderFinalPage(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 = "color-overlay.pdf";
}
if (!filename.toLowerCase().endsWith(".pdf")) {
filename += ".pdf";
}
return filename;
}
تخلیق شدہ پی ڈی ایف کے بارے میں معلومات دکھاتا ہے۔
pageCount.textContent = `${finalPdf.numPages} Pages`;
fileSize.textContent = formatFileSize(generatedPdfBlob.size);
مکمل دستاویز ڈاؤن لوڈ کریں۔
downloadButton.addEventListener("click", () => {
const url = URL.createObjectURL(generatedPdfBlob);
const link = document.createElement("a");
link.href = url;
link.download = getFilename();
link.click();
URL.revokeObjectURL(url);
});
ہر چیز براؤزر کے اندر مقامی طور پر ہوتی ہے، جس سے صارفین اپنی پی ڈی ایف فائلوں کو نجی رکھ سکتے ہیں۔
آئیے پورے ورک فلو پر ایک نظر ڈالتے ہیں۔
مرحلہ 1: پی ڈی ایف اپ لوڈ کریں۔
صارفین پی ڈی ایف کو اپ لوڈ ایریا میں گھسیٹ سکتے ہیں یا پی ڈی ایف منتخب کریں۔.
مرحلہ 2: اپنے دستاویز کا جائزہ لیں۔
اپ لوڈ کردہ پی ڈی ایف کو صفحہ بہ صفحہ پیش کیا جاتا ہے، جس سے صارفین تبدیلیاں کرنے سے پہلے دستاویز کا جائزہ لے سکتے ہیں۔
مرحلہ 3: اوورلے کو ترتیب دیں۔
صارفین اوورلے رنگ کا انتخاب کرتے ہیں، دھندلاپن کو ایڈجسٹ کرتے ہیں، بلینڈنگ موڈ کا انتخاب کرتے ہیں، اوورلے لوکیشن کا انتخاب کرتے ہیں، اور فیصلہ کرتے ہیں کہ اثر کس صفحے پر لاگو کیا جائے گا۔
مرحلہ 4: اوورلے لگائیں۔
کلک کریں اوورلے لگائیں۔ منتخب کردہ ترتیبات کا استعمال کرتے ہوئے منتخب صفحات پر کارروائی کرتا ہے۔
مرحلہ 5: پروسیس شدہ پی ڈی ایف کا جائزہ لیں۔
مکمل شدہ پی ڈی ایف ایک پیش نظارہ ونڈو میں ظاہر ہوتا ہے تاکہ صارف ڈاؤن لوڈ کرنے سے پہلے لاگو اوورلے کو دیکھ سکیں۔
مرحلہ 6: نام تبدیل کریں اور ڈاؤن لوڈ کریں۔
آخر میں، صارف اگر ضروری ہو تو آؤٹ پٹ فائل کا نام تبدیل کر سکتے ہیں، صفحہ کی گنتی اور فائل کے سائز کا جائزہ لے سکتے ہیں، اور تیار کردہ پی ڈی ایف ڈاؤن لوڈ کر سکتے ہیں۔
کارکردگی کی تجاویز
بڑی پی ڈی ایف فائلوں کو پروسیس ہونے میں زیادہ وقت لگ سکتا ہے کیونکہ تمام منتخب صفحات کو رینڈر اور اپ ڈیٹ کرنا ضروری ہے۔ صرف آپ کو مطلوبہ صفحات پر کارروائی کرنے سے کارکردگی کو بہتر بنانے میں مدد مل سکتی ہے۔
for (const page of selectedPages) {
await processPage(page);
}
فائلیں ڈاؤن لوڈ کرنے کے بعد، میموری کے استعمال کو کم کرنے کے لیے مفت عارضی وسائل۔
URL.revokeObjectURL(downloadUrl);
یہ چھوٹی اصلاحیں بڑی، کثیر صفحاتی پی ڈی ایف دستاویزات کے ساتھ کام کرتے وقت ایپلیکیشن کو جوابدہ رکھنے میں مدد کرتی ہیں۔
عام غلطیاں
ایک عام غلطی اصل صفحہ کو بحال کیے بغیر متعدد اوورلیز کا اطلاق کرنا ہے۔ دوسرا اوورلے لگانے سے پہلے ہمیشہ پی ڈی ایف صفحہ کی ایک نئی کاپی پیش کریں۔
await renderPage(currentPage);
ایک اور مسئلہ دھندلاپن یا بلینڈ موڈ کو تبدیل کرنے کے بعد ڈیفالٹ کینوس کی حالت کو بحال کرنا بھول جانا ہے۔
context.globalAlpha = 1;
context.globalCompositeOperation = "source-over";
آخر میں، بہت زیادہ دھندلاپن آپ کو اصل PDF مواد کو مکمل طور پر چھپانے کی اجازت دیتا ہے۔ شفافیت کی مناسب سطح کا انتخاب عام طور پر آپ کو زیادہ متوازن نتیجہ دے گا۔
نتیجہ
اس ٹیوٹوریل میں، ہم نے براؤزر پر مبنی پی ڈی ایف کلر اوورلے ٹول بنانے کے لیے جاوا اسکرپٹ کا استعمال کیا۔
آپ نے پی ڈی ایف دستاویز کو اپ لوڈ کرنے، PDF.js کے ساتھ صفحہ کو رینڈر کرنے، اوورلے کے رنگوں کو ترتیب دینے، دھندلاپن کو ایڈجسٹ کرنے، بلینڈنگ کے طریقوں کو لاگو کرنے، اوورلیز رکھنے، منتخب صفحات پر کارروائی کرنے، PDF-lib کا استعمال کرتے ہوئے ایک نئی PDF تخلیق کرنے، تیار شدہ دستاویز کا پیش نظارہ کرنے، آؤٹ پٹ فائل کا نام تبدیل کرنے، اور اسے براہ راست اپنے براؤزر سے ڈاؤن لوڈ کرنے کا طریقہ سیکھا۔
چونکہ پورا ورک فلو مقامی طور پر چلتا ہے، اس لیے صارف اہم فائلوں کو بیرونی سرور پر اپ لوڈ کیے بغیر PDF دستاویزات کو اپنی مرضی کے مطابق بنا سکتے ہیں۔
آپ ہمارے پی ڈی ایف کلر اوورلے ٹول کا استعمال کر کے اپنے پورے ورک فلو کو دریافت کر سکتے ہیں۔
یہاں سے، آپ اپنے پروجیکٹ کو گریڈینٹ اوورلیز، حسب ضرورت اوورلے شکلوں، تصویری اوورلیز، دوبارہ استعمال کے قابل کلر پری سیٹس، واٹر مارک ٹیمپلیٹس، یا مزید لچک کے لیے اضافی PDF ایڈیٹنگ فیچرز کے ساتھ بڑھا سکتے ہیں۔