بہت سی پی ڈی ایف دستاویزات میں ایسی معلومات ہوتی ہیں جن کا عوامی طور پر اشتراک نہیں کیا جانا چاہیے۔ کسی اور کو فائل بھیجنے سے پہلے آپ کو اکثر ذاتی تفصیلات، مالیاتی اعداد و شمار، دستخط، پتے، اکاؤنٹ نمبر، ملازم کی معلومات یا خفیہ کاروباری ڈیٹا کو چھپانے کی ضرورت ہوتی ہے۔
پی ڈی ایف بلر ٹول اس عمل کو آسان بناتا ہے۔ مواد کو مستقل طور پر ہٹانے کے بجائے، یہ پی ڈی ایف کے منتخب علاقوں پر دھندلا اثر لاگو کرتا ہے، جس سے حساس معلومات کو پڑھنا مشکل ہو جاتا ہے جبکہ باقی دستاویز کو کوئی تبدیلی نہیں کی جاتی ہے۔
اس ٹیوٹوریل میں، ہم جاوا اسکرپٹ کا استعمال کرتے ہوئے براؤزر پر مبنی پی ڈی ایف بلرنگ ٹول بنائیں گے۔ صارفین پی ڈی ایف اپ لوڈ کر سکتے ہیں، تمام صفحات کا پیش منظر دیکھ سکتے ہیں، حساس مواد پر بلر باکس کھینچ سکتے ہیں، دھندلا پن کی شدت کو ایڈجسٹ کر سکتے ہیں، منتخب صفحات پر دھندلا پن لگا سکتے ہیں، حتمی نتیجہ کا پیش منظر دیکھ سکتے ہیں، اور پروسیس شدہ PDF ڈاؤن لوڈ کر سکتے ہیں – یہ سب کچھ سرور پر فائل اپ لوڈ کیے بغیر۔
ہم PDF.js کو براؤزر کے اندر پی ڈی ایف صفحات، بلر ریجنز بنانے اور ان کا نظم کرنے کے لیے HTML کینوس، اور حتمی دھندلی پی ڈی ایف بنانے کے لیے PDF-lib کا استعمال کرتے ہیں۔
اس ٹیوٹوریل کے اختتام تک، آپ کے پاس کلائنٹ سائیڈ پی ڈی ایف ایڈیٹنگ ٹول ہوگا جو میری سائٹ AllInOneTools پر دستیاب ہے۔
انڈیکس
پی ڈی ایف بلر ٹول آپ کی دستاویزات کو شیئر کرنے سے پہلے حساس معلومات کی حفاظت میں مدد کرتا ہے۔ اصل مواد میں ترمیم کرنے یا اسے حذف کرنے کے بجائے، یہ کسی منتخب علاقے پر بصری دھندلا پن کا اطلاق کرتا ہے، جس سے خفیہ معلومات کو پڑھا نہیں جا سکتا جبکہ باقی دستاویز کو کوئی تبدیلی نہیں کی جاتی ہے۔
یہ طریقہ ذاتی معلومات، مالی معلومات، اکاؤنٹ نمبر، دستخط، پتے، چہرے، یا دوسرے نجی مواد کو چھپانے کے لیے مفید ہے جو حتمی دستاویز میں ظاہر نہیں ہونا چاہیے۔
اس پروجیکٹ میں، صارفین اپنے براؤزر سے براہ راست پی ڈی ایف اپ لوڈ کر سکتے ہیں، تمام صفحات کا پیش نظارہ کر سکتے ہیں، اور جن علاقوں کو وہ چھپانا چاہتے ہیں ان پر ایک یا زیادہ دھندلے حصے کھینچ سکتے ہیں۔ یہ ٹول صارفین کو دھندلاپن کی شدت کو ایڈجسٹ کرنے، منتخب کردہ علاقوں یا پورے صفحات کو دھندلا کرنے، موجودہ صفحہ، تمام صفحات، یا مخصوص صفحہ کی حدود پر اثرات لاگو کرنے، تیار شدہ دستاویز کا پیش نظارہ کرنے، آؤٹ پٹ فائل کا نام تبدیل کرنے اور حتمی پی ڈی ایف ڈاؤن لوڈ کرنے کی بھی اجازت دیتا ہے۔
چونکہ ہر چیز براؤزر کے اندر چلتی ہے، اس لیے سرور پر کوئی فائل اپ لوڈ نہیں ہوتی، جس سے دستاویز کی رازداری کو برقرار رکھنے میں مدد ملتی ہے۔
پس منظر میں، ایپلیکیشن پہلے PDF.js کا استعمال کرتی ہے تاکہ ہر پی ڈی ایف صفحہ کو HTML کینوس پر رینڈر کیا جا سکے۔ اصل پی ڈی ایف میں فوری طور پر ترمیم کرنے کے بجائے، ہم آپ کی تخلیق کردہ ہر دھندلی جگہ کے لیے مقام، سائز، صفحہ نمبر، اور دھندلاپن کی شدت کو ریکارڈ کرتے ہیں۔
جب صارف اپلائی اور فائنِش پر کلک کرتا ہے تو محفوظ شدہ ایریا براؤزر کوآرڈینیٹ سے اصل پی ڈی ایف پیج کوآرڈینیٹ میں تبدیل ہو جاتا ہے۔ منتخب کردہ دھندلا اثر پھر پیش کردہ صفحہ پر لاگو کیا جاتا ہے، اور PDF-lib باقی دستاویز کو محفوظ رکھتے ہوئے دھندلا ہوا مواد پر مشتمل ایک نئی PDF تخلیق کرتا ہے۔
یہ ورک فلو ایک انٹرایکٹو ایڈیٹنگ کا تجربہ فراہم کرتا ہے جب تک کہ حتمی دستاویز کی تخلیق نہ ہو جائے اصل پی ڈی ایف کو کوئی تبدیلی نہیں کی جاتی ہے۔
مثال کے طور پر، ہر دھندلے علاقے کو درج ذیل آبجیکٹ سے ظاہر کیا جا سکتا ہے:
const blurRegion = {
page: 2,
x: 180,
y: 240,
width: 260,
height: 90,
intensity: 6
};
ہر چیز حتمی پی ڈی ایف تخلیق کے عمل کے دوران بلر اثر کو دوبارہ پیش کرنے کے لیے درکار تمام معلومات کو اسٹور کرتی ہے۔
پروجیکٹ کی ترتیبات
کوئی بھی کوڈ لکھنے سے پہلے، آئیے اپنے پی ڈی ایف بلر ٹول کے لیے ایک سادہ پروجیکٹ ڈھانچہ بنائیں۔
ہم دو لائبریریوں کے ساتھ سادہ HTML، CSS اور JavaScript استعمال کرتے ہیں۔
ہمارے منصوبے کا ڈھانچہ مندرجہ ذیل ہے:
pdf-blur-tool/
│── index.html
│── style.css
│── script.js
│── pdf.worker.min.js
│── assets/
اپنے پروجیکٹ کو سادہ رکھنے سے یہ سمجھنا آسان ہو جاتا ہے کہ ہر حصہ کیسے کام کرتا ہے۔
اپنی جاوا اسکرپٹ لوڈ کرنے سے پہلے PDF.js اور PDF-lib شامل کریں۔
پی ڈی ایف ورکر کو کنفیگر کریں۔
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://www.freecodecamp.org/news/build-pdf-blur-tool-javascript/pdf.worker.min.js";
کارکنان بیک گراؤنڈ تھریڈ پر پی ڈی ایف رینڈرنگ کو ہینڈل کرتے ہیں، جو صفحہ کے رینڈرنگ کے دوران انٹرفیس کو ریسپانسیو رکھنے میں مدد کرتا ہے۔
ایک HTML لے آؤٹ بنائیں
درخواست چار اہم حصوں پر مشتمل ہے:
-
اپ لوڈ کے علاقے
-
پی ڈی ایف پیش نظارہ
-
بلر سیٹنگز پینل
-
حتمی ڈاؤن لوڈ سیکشن
ایک بنیادی ترتیب بنائیں۔
ابتدائی طور پر، صرف اپ لوڈز سیکشن ظاہر ہوتا ہے۔
جب آپ پی ڈی ایف کو منتخب کرتے ہیں تو ایک ایڈیٹر ظاہر ہوگا۔
DOM عنصر منتخب کریں۔
پوری ایپلی کیشن میں استعمال ہونے والے عناصر کے حوالے تخلیق کرتا ہے۔
const uploadSection =
document.getElementById(
"uploadSection"
);
const editorSection =
document.getElementById(
"editorSection"
);
const resultSection =
document.getElementById(
"resultSection"
);
const fileInput =
document.getElementById(
"pdfInput"
);
const pdfCanvas =
document.getElementById(
"pdfCanvas"
);
const canvasContext =
pdfCanvas.getContext("2d");
یہ حوالہ جات ایپلیکیشن کو اپ لوڈ، ترمیم اور ڈاؤن لوڈ کے مراحل کے درمیان منتقلی کی اجازت دیتے ہیں۔
پی ڈی ایف اپ لوڈ اور پیش نظارہ کریں۔
اپ لوڈ سیکشن موجودہ فائلوں کو ڈریگ اور ڈراپ اور منتخب کرنے دونوں کی اجازت دیتا ہے۔
اگر آپ پی ڈی ایف کو منتخب کرتے ہیں، تو جاری رکھنے سے پہلے یقینی بنائیں کہ یہ دراصل پی ڈی ایف ہے۔
async function handlePdfUpload(
file
) {
if (
!file ||
file.type !==
"application/pdf"
) {
alert(
"Please select a PDF file."
);
return;
}
await loadPdf(file);
}
اگر توثیق کامیاب ہو جاتی ہے، تو دستاویز میموری میں لوڈ ہو جاتی ہے۔
پی ڈی ایف پڑھیں
فائل API کا استعمال کرتے ہوئے اپ لوڈ کردہ فائل کو ArrayBuffer میں تبدیل کریں۔
async function loadPdf(
file
) {
const bytes =
await file.arrayBuffer();
pdfDocument =
await pdfjsLib
.getDocument({
data: bytes
})
.promise;
currentPage = 1;
await renderPage(
currentPage
);
}
اپ لوڈ کردہ بائٹس کو بعد میں دھندلی پی ڈی ایف بنانے کے لیے دوبارہ استعمال کیا جائے گا۔
پہلا صفحہ پیش کرنا
PDF.js ہر صفحہ کو HTML کینوس پر پیش کرتا ہے۔
مطلوبہ صفحہ تلاش کرکے شروع کریں۔
async function renderPage(
pageNumber
) {
const page =
await pdfDocument
.getPage(
pageNumber
);
const viewport =
page.getViewport({
scale: 1.5
});
صفحہ کے سائز میں فٹ ہونے کے لیے کینوس کا سائز تبدیل کریں۔
pdfCanvas.width =
viewport.width;
pdfCanvas.height =
viewport.height;
صفحہ رینڈر کریں۔
await page.render({
canvasContext,
viewport
}).promise;
رینڈرنگ مکمل ہونے کے بعد، پی ڈی ایف صفحہ ایڈیٹر کے اندر ظاہر ہوگا۔
صفحہ نیویگیشن بنائیں
زیادہ تر پی ڈی ایف دستاویزات میں متعدد صفحات ہوتے ہیں۔
صارفین کو پچھلے اور اگلے بٹنوں کا استعمال کرتے ہوئے صفحات کے درمیان منتقل ہونے دیں۔
let currentPage = 1;
let pdfDocument = null;
پچھلے صفحے پر جائیں۔
previousButton
.addEventListener(
"click",
async () => {
if (
currentPage === 1
) {
return;
}
currentPage--;
await renderPage(
currentPage
);
}
);
اگلے صفحے پر جائیں۔
nextButton
.addEventListener(
"click",
async () => {
if (
currentPage ===
pdfDocument.numPages
) {
return;
}
currentPage++;
await renderPage(
currentPage
);
}
);
جب بھی موجودہ صفحہ تبدیل ہوتا ہے تو صفحہ کاؤنٹر کو اپ ڈیٹ کریں۔
pageIndicator.textContent =
`Page ${currentPage} of ${pdfDocument.numPages}`;
یہ بڑی پی ڈی ایف دستاویزات کو نیویگیٹ کرتے وقت صارفین کو واضح رائے دیتا ہے۔
دھندلا ترمیم تیار ہے۔
جب موجودہ صفحہ پیش کیا جاتا ہے، تو ایپلی کیشن پی ڈی ایف کینوس کے اوپر ایک شفاف تہہ تیار کرتی ہے۔
یہ اوورلے اصل صفحہ کے پیش نظارہ میں ترمیم کیے بغیر ماؤس کے تعاملات کو پکڑتا ہے۔
ایک اوورلے بنائیں۔
سائز کو پی ڈی ایف پیش نظارہ سے ملا دیں۔
overlayCanvas.width =
pdfCanvas.width;
overlayCanvas.height =
pdfCanvas.height;
بعد میں ٹیوٹوریل میں، یہ اوورلے صارف کو پی ڈی ایف صفحہ کو برقرار رکھتے ہوئے بلر ایریا بنانے کی اجازت دے گا۔
ایڈیٹر دکھائیں۔
پہلے صفحہ کی رینڈرنگ مکمل ہونے کے بعد، اپ لوڈ اسکرین سے ایڈیٹر انٹرفیس پر جائیں۔
uploadSection.hidden =
true;
editorSection.hidden =
false;
صارفین اب دستاویز کا پیش منظر دیکھ سکتے ہیں، صفحات کے درمیان نیویگیٹ کر سکتے ہیں، اور ان علاقوں کو منتخب کر سکتے ہیں جنہیں دھندلا کرنے کی ضرورت ہے۔
ایک دھندلا علاقہ بنائیں
اب جب کہ پی ڈی ایف پیش نظارہ کام کر رہا ہے، ہم اپنی ایپلیکیشن کی سب سے اہم خصوصیت بنا سکتے ہیں: صارفین کو حساس معلومات کو دھندلا کرنے کی اجازت دینا۔
فوری طور پر پی ڈی ایف میں ترمیم کرنے کے بجائے، صارفین پہلے صفحے کے پیش نظارہ پر ایک یا زیادہ دھندلے علاقوں کو کھینچتے ہیں۔
ہر علاقہ اپنی پوزیشن، سائز اور دھندلاپن کی شدت کو محفوظ کرتا ہے۔ اس علاقے کو بعد میں حتمی پروسیسنگ کے دوران اصل پی ڈی ایف کوآرڈینیٹ میں تبدیل کر دیا جاتا ہے۔
بلر ایریا آبجیکٹ بنائیں
تمام بلر ایریاز کو جاوا اسکرپٹ آبجیکٹ کے طور پر دکھایا جاتا ہے۔
مثال کے طور پر:
const blurArea = {
page: currentPage,
x: 0,
y: 0,
width: 0,
height: 0,
intensity: 6
};
فلائی پر پی ڈی ایف میں ترمیم کرنے کے بجائے، ایپلی کیشن ان اشیاء کو اس وقت تک ٹریک کرتی ہے جب تک کہ صارف ان پر کلک نہ کرے۔ درخواست اور تکمیل.
متعدد دھندلے علاقوں کو محفوظ کریں۔
صارفین کو اکثر معلومات کے ایک سے زیادہ ٹکڑے چھپانے کی ضرورت ہوتی ہے۔
تمام دھندلے علاقوں کو ایک صف میں اسٹور کریں۔
const blurAreas = [];
جب بھی کوئی نیا بلر باکس بنتا ہے، ہم اسے صف میں ڈال دیتے ہیں۔
blurAreas.push({
page: currentPage,
x,
y,
width,
height,
intensity:
blurIntensity
});
یہ آپ کو بعد میں انفرادی دھندلے علاقوں کو آسانی سے دوبارہ بنانے، ترمیم کرنے یا ہٹانے کی اجازت دیتا ہے۔
دھندلا انتخاب شروع کریں۔
ایک شفاف اوورلے کینوس ماؤس کے تعامل کو پکڑتا ہے۔
جب صارف ماؤس کا بٹن دباتا ہے تو ابتدائی پوزیشن کو ریکارڈ کرتا ہے۔
let isDrawing = false;
let startX = 0;
let startY = 0;
overlayCanvas
.addEventListener(
"mousedown",
event => {
isDrawing = true;
startX = event.offsetX;
startY = event.offsetY;
}
);
دھندلا مستطیل اس مقام سے شروع ہوتا ہے۔
ایک دھندلا مستطیل کھینچیں۔
جیسے ہی ماؤس حرکت کرتا ہے مستطیل طول و عرض کو اپ ڈیٹ کرتا ہے۔
overlayCanvas
.addEventListener(
"mousemove",
event => {
if (
!isDrawing
) {
return;
}
drawPreviewBox(
startX,
startY,
event.offsetX,
event.offsetY
);
}
);
پیش نظارہ اپ ڈیٹ ہوتا رہتا ہے کیونکہ صارف ماؤس کو گھسیٹتا ہے۔
ختم منتخب کریں
مکمل بلر ایریا کو بچانے کے لیے ماؤس کا بٹن چھوڑ دیں۔
overlayCanvas
.addEventListener(
"mouseup",
event => {
isDrawing = false;
blurAreas.push({
page:
currentPage,
x:
startX,
y:
startY,
width:
event.offsetX -
startX,
height:
event.offsetY -
startY,
intensity:
blurIntensity
});
redrawBlurAreas();
updateBlurList();
}
);
ہر بلر ایریا موجودہ ایڈیٹنگ سیشن کا حصہ بن جاتا ہے۔
ایک موجودہ دھندلا علاقہ بنائیں
جب بھی صفحہ تبدیل ہوتا ہے یا دھندلے علاقوں کو شامل کیا جاتا ہے تو تمام بلر باکسز کو دوبارہ بناتا ہے۔
function redrawBlurAreas() {
overlayContext.clearRect(
0,
0,
overlayCanvas.width,
overlayCanvas.height
);
blurAreas
.filter(
area =>
area.page ===
currentPage
)
.forEach(
drawBlurArea
);
}
یہ ترمیم کے دوران پہلے سے بنائے گئے بلر ایریا کو مرئی رکھے گا۔
بلر باکس دکھائیں۔
تمام محفوظ کردہ علاقوں کو نقطے والے خاکہ کے طور پر پیش کرتا ہے۔
function drawBlurArea(
area
) {
overlayContext
.setLineDash([6, 4]);
overlayContext
.strokeStyle =
"#4f6cff";
overlayContext
.strokeRect(
area.x,
area.y,
area.width,
area.height
);
}
خاکہ ایک رہنما کے طور پر کام کرتا ہے اور حتمی PDF کا حصہ نہیں بنتا ہے۔
دھندلاپن کے اختیارات
صارفین بلر اثر کو لاگو کرنے کا طریقہ منتخب کر سکتے ہیں۔
یہ ٹول دو طریقوں کی حمایت کرتا ہے:
-
منتخب علاقے کو دھندلا کرتا ہے۔
-
پورے صفحے کو دھندلا کر دیتا ہے۔
آپ کے منتخب کردہ اختیارات ترمیمی رویے کو کنٹرول کرتے ہیں۔
const blurMode =
document.querySelector(
'input[name="blurMode"]:checked'
).value;
اگر منتخب علاقے کو دھندلا کرتا ہے۔ منتخب ہونے پر، صارف دستی طور پر ایک دھندلا مستطیل کھینچتا ہے۔
اگر پورے صفحے کو دھندلا کر دیتا ہے۔ منتخب ہونے پر، ایپلیکیشن دستی انتخاب کو چھوڑ دے گی اور حتمی کارروائی کے دوران پورے صفحے کو دھندلا کرنے کے لیے تیار ہو جائے گی۔
دھندلا پن کی شدت کو ایڈجسٹ کریں۔
مختلف دستاویزات کو دھندلا پن کی مختلف سطحوں کی ضرورت ہوتی ہے۔
سلائیڈر آپ کو اثر لگانے سے پہلے دھندلا پن کی شدت کو کنٹرول کرنے دیتا ہے۔
const blurSlider =
document.getElementById(
"blurIntensity"
);
let blurIntensity = 6;
blurSlider
.addEventListener(
"input",
event => {
blurIntensity =
Number(
event.target.value
);
}
);
منتخب کردہ قدر کو کسی بھی نئے بنائے گئے بلر ایریاز کے ساتھ محفوظ کیا جائے گا۔
blurArea.intensity =
blurIntensity;
قدر جتنی زیادہ ہوگی، دھندلا اثر اتنا ہی مضبوط ہوگا۔
متعدد دھندلے علاقوں کا نظم کریں۔
بہت سی دستاویزات میں مختلف قسم کی خفیہ معلومات ہوتی ہیں۔
صارف کو کسی ایک دھندلے مستطیل تک محدود کرنے کے بجائے، ایپلیکیشن تمام محفوظ کردہ علاقوں کو دکھاتی ہے۔
مثال کے طور پر:
Blur Area #1
Blur Area #2
Blur Area #3
ہر اندراج میں ایک ہٹائیں بٹن شامل ہوتا ہے۔
function removeBlurArea(
index
) {
blurAreas.splice(
index,
1
);
redrawBlurAreas();
updateBlurList();
}
یہ صارفین کو صرف ان دھندلے علاقوں کو حذف کرنے کی اجازت دیتا ہے جن کی مزید ضرورت نہیں ہے۔
موجودہ صفحہ سے تمام دھندلے علاقوں کو ہٹانے کے لیے:
function clearCurrentPage() {
const remaining =
blurAreas.filter(
area =>
area.page !==
currentPage
);
blurAreas.length = 0;
blurAreas.push(
...remaining
);
redrawBlurAreas();
}
صفحہ پر بلر اثر لگائیں۔
صارف کسی دستاویز کے اندر صرف ایک یا ایک سے زیادہ صفحات کو دھندلا کرنا چاہتے ہیں۔
ایڈیٹر تین اختیارات پیش کرتا ہے:
-
صرف موجودہ صفحہ
-
تمام صفحات
-
مخصوص صفحہ
const pageOption =
document.querySelector(
'input[name="pageOption"]:checked'
).value;
اگر صارف منتخب کرتا ہے۔ مخصوص صفحہآپ درج ذیل اقدار درج کر سکتے ہیں:
1, 3-5, 8
ان اقدار کو بعد میں حتمی پی ڈی ایف بننے سے پہلے صفحہ نمبروں کی صف میں تبدیل کر دیا جاتا ہے۔
بلر اثر لگائیں۔
اب تک، صارفین نے پی ڈی ایف اپ لوڈ کیا ہے، ایک یا زیادہ دھندلے علاقوں کو منتخب کیا ہے، دھندلا پن کی شدت کو ایڈجسٹ کیا ہے، اور کارروائی کے لیے صفحات کو منتخب کیا ہے۔
آخری مرحلہ یہ ہے کہ تیار کردہ پی ڈی ایف میں ان دھندلے علاقوں کو اصل دھندلا مواد میں تبدیل کیا جائے۔
اصل دستاویز میں براہ راست ترمیم کرنے کے بجائے، ایپلی کیشن اصل فائل کو محفوظ رکھتے ہوئے ایک نئی پی ڈی ایف بناتی ہے۔
اصل پی ڈی ایف لوڈ کریں۔
اپ لوڈ کردہ PDF کو PDF-lib میں لوڈ کرکے شروع کریں۔
async function applyBlur() {
const pdfDoc =
await PDFLib.PDFDocument.load(
originalPdfBytes.slice()
);
const pages =
pdfDoc.getPages();
}
اصل بائٹس کی ایک کاپی کا استعمال یقینی بناتا ہے کہ آپ کی اپ لوڈ کردہ دستاویز میں کوئی تبدیلی نہیں ہوتی۔
منتخب صفحات پر کارروائی کریں۔
فیصلہ کریں کہ آپ کن صفحات پر دھندلا اثر لاگو کرنا چاہتے ہیں۔
const selectedPages =
parsePageSelection(
pageSelection,
pdfDoc.getPageCount()
);
مثال کے طور پر:
Current Page
↓
[2]
All Pages
↓
[1,2,3,4]
Specific Pages
↓
[1,3,5]
پروسیسنگ کے دوران صرف اس صفحہ میں ترمیم کی جائے گی۔
ہر صفحہ کو بطور تصویر پیش کریں۔
بلر ایک پکسل پر مبنی اثر ہے، لہذا ہر منتخب پی ڈی ایف صفحہ کو آف اسکرین کینوس پر پیش کیا جاتا ہے۔
const page =
await pdfDocument.getPage(
pageNumber
);
const viewport =
page.getViewport({
scale: 2
});
const canvas =
document.createElement(
"canvas"
);
canvas.width =
viewport.width;
canvas.height =
viewport.height;
صفحہ رینڈر کریں۔
await page.render({
canvasContext:
canvas.getContext("2d"),
viewport
}).promise;
کینوس میں اب پی ڈی ایف صفحات کے بٹ میپ ورژن ہیں جن میں آپ ترمیم کر سکتے ہیں۔
منتخب کردہ جگہ پر دھندلا پن لگائیں۔
موجودہ صفحہ سے تعلق رکھنے والے تمام دھندلے علاقوں کو بازیافت کرتا ہے۔
const pageRegions =
blurAreas.filter(
area =>
area.page === pageNumber
);
تمام دھندلے علاقوں کے لیے دہرائیں۔
pageRegions.forEach(
area => {
blurCanvasRegion(
canvas,
area
);
}
);
ہر علاقہ آزادانہ طور پر دھندلا ہوا ہے۔
کینوس کے علاقے کو دھندلا کریں۔
براؤزر کا کینوس API آپ کو ڈرائنگ کے دوران فلٹرز لگانے کی اجازت دیتا ہے۔
منتخب کردہ شدت کی بنیاد پر بلر فلٹر سیٹ کرتا ہے۔
context.filter =
`blur(${area.intensity}px)`;
صرف منتخب علاقے کو دوبارہ کھینچتا ہے۔
context.drawImage(
canvas,
area.x,
area.y,
area.width,
area.height,
area.x,
area.y,
area.width,
area.height
);
ڈرائنگ کے بعد، فلٹر کو دوبارہ ترتیب دیں۔
context.filter = "none";
صرف منتخب مستطیل کو دھندلا کر دیا جائے گا اور باقی صفحہ غیر تبدیل شدہ رہے گا۔
پورے صفحے کو دھندلا کریں۔
اگر صارف منتخب کرتا ہے۔ پورے صفحے کو دھندلا کر دیتا ہے۔عمل بہت آسان ہے۔
پورے کینوس پر فلٹرز لگائیں۔
context.filter =
`blur(${blurIntensity}px)`;
context.drawImage(
canvas,
0,
0
);
context.filter =
"none";
پورے رینڈر شدہ صفحہ کو منتخب بلر اثر ملے گا۔
کینوس کو واپس پی ڈی ایف امیج میں تبدیل کریں۔
کینوس میں ترمیم کرنے کے بعد، اسے تصویر میں تبدیل کریں۔
const imageData =
canvas.toDataURL(
"image/png"
);
تصویر کو بائٹس میں تبدیل کریں۔
const bytes =
await fetch(imageData)
.then(
response =>
response.arrayBuffer()
);
PDF-lib میں تصاویر داخل کریں۔
const image =
await pdfDoc.embedPng(
bytes
);
صفحہ کے مواد کو تبدیل کریں۔
const pdfPage =
pages[
pageNumber - 1
];
const size =
pdfPage.getSize();
pdfPage.drawImage(
image,
{
x: 0,
y: 0,
width:
size.width,
height:
size.height
}
);
تمام منتخب صفحات کے لیے اسی عمل کو دہرائیں۔
پروسیسنگ کی حیثیت دکھائیں۔
بڑی PDF فائلیں بنانے میں کئی سیکنڈ لگ سکتے ہیں۔
پروسیسنگ کے دوران لوڈنگ اسٹیٹس دکھاتا ہے۔
applyButton.disabled =
true;
applyButton.textContent =
"Applying...";
پروسیسنگ مکمل ہونے کے بعد:
applyButton.disabled =
false;
applyButton.textContent =
"Apply & Finalize";
اس سے صارفین کو واضح رائے ملتی ہے کہ ایپلی کیشن کام کر رہی ہے۔
پروسیسنگ:
حتمی پی ڈی ایف بنائیں
تمام صفحات پر کارروائی کے بعد اپنی مکمل دستاویز کو محفوظ کریں۔
const pdfBytes =
await pdfDoc.save();
const outputBlob =
new Blob(
[pdfBytes],
{
type:
"application/pdf"
}
);
اپنے نتائج کو محفوظ کریں تاکہ آپ بعد میں ان کا پیش نظارہ اور ڈاؤن لوڈ کر سکیں۔
generatedPdfBlob =
outputBlob;
اس وقت، آپ کی دھندلی پی ڈی ایف کامیابی کے ساتھ بنائی گئی ہے۔
نتائج کا پیش نظارہ کریں۔
ایڈیٹنگ انٹرفیس کو چھپاتا ہے اور مکمل دستاویز دکھاتا ہے۔
editorSection.hidden =
true;
resultSection.hidden =
false;
نتیجے میں اسکرین اس طرح نظر آئے گی:
-
حتمی پی ڈی ایف پیش نظارہ
-
قابل ترمیم فائل کا نام
-
کل صفحات
-
فائل کا سائز
-
ڈاؤن لوڈ بٹن
صارف پروسیس شدہ دستاویزات کو ڈاؤن لوڈ کرنے سے پہلے ان کا جائزہ لے سکتے ہیں۔
نام تبدیل کریں اور ڈاؤن لوڈ کریں۔
ڈاؤن لوڈ کرنے سے پہلے، صارف تیار کردہ فائلوں کا نام تبدیل کر سکتے ہیں۔
فائل کے نام کی فیلڈ بنائیں۔
براہ کرم فائل کا نام چیک کریں۔
function getFilename() {
let filename =
outputFilename.value.trim();
if (!filename) {
filename =
"blurred-document.pdf";
}
if (
!filename
.toLowerCase()
.endsWith(".pdf")
) {
filename += ".pdf";
}
return filename;
}
اضافی فائل کی معلومات دکھاتا ہے۔
pageCount.textContent =
`Pages:
${finalPdfDocument.numPages}`;
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: بلر ایریا مینجمنٹ
آپ انفرادی دھندلے علاقوں کو ہٹا سکتے ہیں یا موجودہ صفحہ پر تمام دھندلے علاقوں کو صاف کر سکتے ہیں۔
یہ حتمی پی ڈی ایف بنانے سے پہلے ترمیم کو بہت آسان بنا دیتا ہے۔
مرحلہ 7: صفحات منتخب کریں۔
صارف فیصلہ کرتا ہے کہ آیا اگلا بلر اثر لاگو کرنا ہے۔
-
موجودہ صفحہ
-
تمام صفحات
-
مخصوص صفحہ
مثال کے طور پر:
1,3-5,8
مرحلہ 8: بلر اثر کا اطلاق کریں۔
ترتیبات کا جائزہ لینے کے بعد، صارفین کر سکتے ہیں۔ درخواست اور تکمیل.
ایپلیکیشن منتخب بلر اثر کے ساتھ ایک نیا پی ڈی ایف بناتی ہے۔
مرحلہ 9: حتمی دستاویز کا جائزہ لیں۔
مکمل شدہ پی ڈی ایف پیش نظارہ ونڈو میں ظاہر ہوگی۔
صارفین ڈاؤن لوڈ کرنے سے پہلے تمام دھندلے علاقوں کو چیک کر سکتے ہیں۔
مرحلہ 10: نام تبدیل کریں اور ڈاؤن لوڈ کریں۔
آخر میں، صارف ضرورت پڑنے پر آؤٹ پٹ فائل کا نام تبدیل کرتا ہے اور اگلا پر کلک کرتا ہے۔ ڈاؤن لوڈ.
براؤزر مکمل شدہ پی ڈی ایف کو مقامی طور پر محفوظ کرتا ہے۔
کارکردگی کی تجاویز
بڑی پی ڈی ایف فائلوں کو پیش کرنے اور اس پر کارروائی کرنے میں زیادہ وقت لگ سکتا ہے، لیکن چند آسان اصلاحات ایڈیٹر کو جوابدہ رکھنے میں مدد کر سکتی ہیں۔
پوری دستاویز کو لوڈ کرنے کے بجائے، یہ صرف وہی صفحہ پیش کرتا ہے جسے صارف فی الحال دیکھ رہا ہے۔
await renderPage(
currentPage
);
اسی کینوس کو دوبارہ استعمال کریں اور تبدیل ہونے پر صرف دھندلے علاقوں کو دوبارہ بنائیں۔
overlayContext.clearRect(
0,
0,
overlayCanvas.width,
overlayCanvas.height
);
redrawBlurAreas();
حتمی پروسیسنگ کے دوران، صرف صارف کے منتخب کردہ صفحات تیار کیے جاتے ہیں۔
for (const page of selectedPages) {
await processPage(page);
}
آخر میں، ڈاؤن لوڈ مکمل ہونے کے بعد کوئی بھی عارضی وسائل جاری کریں۔
URL.revokeObjectURL(
downloadUrl
);
یہ اصلاحیں میموری کے استعمال کو کم کرتی ہیں اور پی ڈی ایف بلر ٹول کو بڑی، کثیر صفحاتی دستاویزات کے ساتھ بھی اچھی طرح کام کرنے میں مدد کرتی ہیں۔
عام غلطیاں
ایک عام مسئلہ موجودہ زوم لیول کو مدنظر رکھنے سے پہلے بلر کوآرڈینیٹس کو اسٹور کرنا ہے۔
حتمی دستاویز تیار کرنے سے پہلے ہمیشہ پیش نظارہ کوآرڈینیٹ کو پی ڈی ایف کوآرڈینیٹ سسٹم میں تبدیل کریں۔
const scaleX =
pdfWidth /
canvas.width;
const scaleY =
pdfHeight /
canvas.height;
ایک اور غلطی دھندلا پن کے علاقے کو صفحہ کی حدود سے آگے بڑھنے کی اجازت دینا ہے۔
پروسیسنگ سے پہلے قدر کو منجمد کرتا ہے۔
blurArea.x = Math.max(
0,
blurArea.x
);
blurArea.y = Math.max(
0,
blurArea.y
);
صارفین کو ڈاؤن لوڈ کرنے سے پہلے حتمی پیش نظارہ بھی دیکھنا چاہیے۔ یہ خاص طور پر درست ہے اگر آپ کے متعدد صفحات پر ایک سے زیادہ دھندلے حصے ہیں۔
آخر میں، اس منصوبے بصری دھندلا اثر پیش کردہ پی ڈی ایف صفحہ پر جائیں۔ اضافی دستاویز میں ترمیم کی مہارتیں درکار ہوتی ہیں جب آپ کی درخواست کو حساس مواد کو بصری طور پر چھپانے کی بجائے مستقل طور پر ہٹانے کی ضرورت ہوتی ہے۔
نتیجہ
اس ٹیوٹوریل میں، ہم نے JavaScript کا استعمال کرتے ہوئے براؤزر پر مبنی PDF بلرنگ ٹول بنایا ہے۔
آپ نے پی ڈی ایف دستاویز کو اپ لوڈ کرنا اور اس کا پیش نظارہ کرنا، صفحات کے درمیان نیویگیٹ کرنا، متعدد دھندلاپن والے علاقوں کو بنانا اور ان کا نظم کرنا، دھندلا پن کی شدت کو ایڈجسٹ کرنا، منتخب صفحات پر دھندلا پن لگانا، PDF-lib کا استعمال کرتے ہوئے ایک نئی PDF بنانا، پروسیس شدہ دستاویز کا پیش نظارہ کرنا، اور حتمی فائل ڈاؤن لوڈ کرنا سیکھا - یہ سب کچھ سرور پر ڈیٹا اپ لوڈ کیے بغیر۔
ہم نے PDF.js، HTML Canvas API، اور PDF-lib کو ملا کر ایک رازداری پر مبنی PDF ایڈیٹنگ ٹول بنایا جو مکمل طور پر براؤزر میں چلتا ہے۔
آپ پی ڈی ایف بلر ٹول کا استعمال کر کے اپنے پورے ورک فلو کو دریافت کر سکتے ہیں۔
یہاں سے، آپ اپنے پروجیکٹ کو حرکت پذیر اور دوبارہ سائز کے قابل بلر ایریاز، انڈو اور ریڈو سپورٹ، دوبارہ قابل استعمال بلر پری سیٹس، کی بورڈ شارٹ کٹس، ٹچ ڈیوائس ایڈیٹنگ، یا مزید جدید براؤزر پر مبنی PDF ایڈیٹنگ کے لیے اضافی تشریحی ٹولز کے ساتھ بڑھا سکتے ہیں۔