چاہے وہ رسیدیں ہوں، اسکین شدہ دستاویزات، رپورٹس، سرٹیفکیٹ، رسیدیں وغیرہ، صارفین کو اکثر پی ڈی ایف صفحات کو تصویری فائلوں میں تبدیل کرنے کی ضرورت ہوتی ہے۔
جدید براؤزرز میں یہ کام پہلے سے کہیں زیادہ آسان ہے۔
اپنے دستاویز کو سرور پر اپ لوڈ کرنے کے بجائے، آپ اپنے براؤزر میں براہ راست PDF فائلوں پر کارروائی کرنے کے لیے JavaScript استعمال کر سکتے ہیں۔ یہ ٹول کو تیز، نجی اور استعمال میں آسان بنا دیتا ہے۔
اس ٹیوٹوریل میں، آپ جاوا اسکرپٹ کا استعمال کرتے ہوئے براؤزر پر مبنی پی ڈی ایف ٹو امیج کنورٹر بنائیں گے۔
یہ ٹول پی ڈی ایف فائلوں کو اپ لوڈ کرنے، صفحات کا جائزہ لینے، تصویری فارمیٹس جیسے JPG یا PNG کو منتخب کرنے، تصویر کے معیار کو ایڈجسٹ کرنے، اور تبدیل شدہ تصاویر کو براہ راست آپ کے براؤزر سے ڈاؤن لوڈ کرنے میں معاونت کرتا ہے۔
سب کچھ مکمل طور پر کلائنٹ کی طرف چلتا ہے، بغیر کسی پسدید کے۔
انڈیکس
-
پی ڈی ایف کو تصویر میں کیسے تبدیل کریں۔
-
پروجیکٹ کی ترتیبات
-
ہم کون سی لائبریری استعمال کر رہے ہیں؟
-
اپ لوڈ انٹرفیس بنائیں
-
پی ڈی ایف فائلیں پڑھیں
-
پی ڈی ایف صفحات کو بطور تصویر پیش کریں۔
-
تصویر کی شکل اور معیار کو منتخب کریں۔
-
تصاویر بنائیں اور ڈاؤن لوڈ کریں۔
-
ڈیمو: پی ڈی ایف امیج ٹول کیسے کام کرتا ہے۔
-
عملی استعمال کے لیے اہم نوٹ
-
سے بچنے کے لیے عام غلطیاں
-
نتیجہ
پی ڈی ایف کو تصویر میں کیسے تبدیل کریں۔
براؤزر پی ڈی ایف فائلوں کو براہ راست تصاویر میں تبدیل نہیں کر سکتے ہیں۔
اس کے بجائے، جاوا اسکرپٹ لائبریری ایک پی ڈی ایف صفحہ کو ایچ ٹی ایم ایل کینوس پر رینڈر کر سکتی ہے اور پھر اسے جے پی جی یا پی این جی جیسی امیج فائل میں ایکسپورٹ کر سکتی ہے۔
یہ عمل اس وقت شروع ہوتا ہے جب صارف اپنے براؤزر پر پی ڈی ایف دستاویز اپ لوڈ کرتا ہے۔ جاوا اسکرپٹ اس کے بعد فائل کو پڑھتا ہے، ہر پی ڈی ایف صفحہ کو کینوس پر بصری طور پر پیش کرتا ہے، پیش کیے گئے صفحات کو تصویری فائلوں میں تبدیل کرتا ہے، اور آخر میں انہیں ڈاؤن لوڈ کے لیے دستیاب کرتا ہے۔
براؤزر کے اندر سب کچھ مقامی طور پر ہوتا ہے۔
اس کا مطلب ہے کہ صارفین کو اپنی ذاتی دستاویزات کو کسی بیرونی سرور پر اپ لوڈ کرنے کی ضرورت نہیں ہے، جس سے اس عمل کو تیز تر اور زیادہ پرائیویسی دوستانہ بنایا جائے۔
پروجیکٹ کی ترتیبات
یہ منصوبہ جان بوجھ کر آسان ہے۔ ہر چیز جاوا اسکرپٹ کا استعمال کرتے ہوئے براہ راست براؤزر کے اندر چلتی ہے، لہذا کسی بیک اینڈ یا سرور سیٹ اپ کی ضرورت نہیں ہے۔
آپ سب کی ضرورت ہے:
-
ایچ ٹی ایم ایل فائل
-
جاوا اسکرپٹ فائل
-
PDF.js لائبریری
ہم کون سی لائبریری استعمال کر رہے ہیں؟
ہم براؤزر میں پی ڈی ایف صفحات کو رینڈر کرنے کے لیے موزیلا کی PDF.js لائبریری کا استعمال کریں گے۔
CDN کا استعمال کرتے ہوئے شامل کریں۔
لوڈ ہونے کے بعد، براؤزر جاوا اسکرپٹ کو پی ڈی ایف صفحات کو براہ راست پڑھنے اور رینڈر کرنے کے لیے استعمال کر سکتے ہیں۔
اپ لوڈ انٹرفیس بنائیں
ایک سادہ اپ لوڈ ایریا کے ساتھ شروع کریں۔
یہ صارفین کو پی ڈی ایف فائلوں کو براہ راست اپنے براؤزر پر اپ لوڈ کرنے کی اجازت دیتا ہے۔
ٹول کے اندر اپ لوڈ سیکشن اس طرح لگتا ہے:
پی ڈی ایف فائلیں پڑھیں
فائل اپ لوڈ ہونے کے بعد، آپ کو اسے پڑھنے کے لیے JavaScript کا استعمال کرنا چاہیے۔
مثال کے طور پر:
const file = document.getElementById("pdfUpload").files[0];
const reader = new FileReader();
reader.onload = async function () {
const typedArray = new Uint8Array(reader.result);
const pdf = await pdfjsLib.getDocument(typedArray).promise;
console.log(pdf.numPages);
};
reader.readAsArrayBuffer(file);
یہ پی ڈی ایف دستاویز کو براہ راست آپ کے براؤزر کے اندر لوڈ کر دے گا۔
اس کے بعد آپ انفرادی طور پر ہر صفحے تک رسائی حاصل کر سکتے ہیں۔
پی ڈی ایف صفحات کو بطور تصویر پیش کریں۔
پی ڈی ایف لوڈ ہونے کے بعد، آپ صفحات کو کینوس پر رینڈر کر سکتے ہیں۔
مثال کے طور پر:
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 2 });
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({
canvasContext: context,
viewport: viewport
}).promise;
یہ منتخب پی ڈی ایف صفحہ کو آپ کے براؤزر میں بصری طور پر پیش کرے گا۔
رینڈرنگ کے بعد، آپ کینوس کو تصویر میں تبدیل کر سکتے ہیں۔
مثال کے طور پر:
const imageData = canvas.toDataURL("image/jpeg", 0.9);
یہ آپ کے پی ڈی ایف صفحہ کا ڈاؤن لوڈ کے قابل تصویری ورژن بنائے گا۔
تصویر کی شکل اور معیار کو منتخب کریں۔
صارف حتمی تصویر بنانے سے پہلے آؤٹ پٹ سیٹنگز کو اپنی مرضی کے مطابق بنا سکتے ہیں۔
مختلف امیج فارمیٹس مختلف حالات میں بہتر کام کرتے ہیں۔
مثال کے طور پر:
-
JPG چھوٹے فائل سائز کے لیے موزوں ہے۔
-
PNG بہتر معیار کو برقرار رکھتا ہے۔
-
WEBP جدید ترین کمپریشن فراہم کرتا ہے۔
صارف سلائیڈرز کا استعمال کرتے ہوئے تصویر کے معیار کو بھی کنٹرول کر سکتے ہیں۔
مثال کے طور پر:
canvas.toDataURL("image/jpeg", 0.8);
قدر 0.8 کمپریشن کوالٹی کو کنٹرول کرتا ہے۔
ذیل میں ٹول کے اندر تصویری شکل اور معیار کی ترتیبات کی مثالیں ہیں۔
تصاویر بنائیں اور ڈاؤن لوڈ کریں۔
صفحہ رینڈر ہونے کے بعد، آپ تصویر کو براہ راست اپنے براؤزر سے ڈاؤن لوڈ کر سکتے ہیں۔
مثال کے طور پر:
const link = document.createElement("a");
link.href = imageData;
link.download = `page-${pageNumber}.jpg`;
link.click();
اس کے بعد تیار کردہ تصویر کو فوری طور پر ڈاؤن لوڈ کیا جائے گا۔
ملٹی پیج پی ڈی ایف کے ساتھ کام کرتے وقت، ایک ہی عمل تمام صفحات کے لیے خود بخود چل سکتا ہے۔
یہ صارفین کو مکمل پی ڈی ایف دستاویزات کو علیحدہ تصویری فائلوں کے طور پر برآمد کرنے کی اجازت دیتا ہے۔
یہ مثال براہ راست براؤزر میں پی ڈی ایف صفحہ کو ڈاؤن لوڈ کے قابل تصویر فائل میں تبدیل کرتی ہے۔
مرحلہ 1: اپنی پی ڈی ایف فائل اپ لوڈ کریں۔
صارف کنورٹر پر ایک یا زیادہ پی ڈی ایف فائلیں اپ لوڈ کرتے ہیں۔
مرحلہ 2: اپ لوڈ کردہ صفحہ کا جائزہ لیں۔
یہ ٹول تبدیلی سے پہلے صفحہ کا پیش نظارہ تیار کرتا ہے۔
یہ صارفین کو اپ لوڈ کردہ دستاویزات کو بصری طور پر چیک کرنے کی اجازت دیتا ہے۔
مرحلہ 3: آؤٹ پٹ سیٹنگز کو کنفیگر کریں۔
صارف تصویر بنانے سے پہلے تصویر کی شکل اور معیار کی ترتیبات کا انتخاب کر سکتے ہیں۔
یہ آپ کو آؤٹ پٹ سائز اور تصویر کی وضاحت پر زیادہ کنٹرول فراہم کرتا ہے۔
مرحلہ 4: پی ڈی ایف صفحات کو تصاویر میں تبدیل کریں۔
سیٹنگز کنفیگر ہونے کے بعد، صارفین کنورٹ بٹن پر کلک کرتے ہیں۔
براؤزر مقامی طور پر پی ڈی ایف پر کارروائی کرتا ہے اور فلائی پر امیج فائل تیار کرتا ہے۔
مرحلہ 5: تیار کردہ تصویر ڈاؤن لوڈ کریں۔
تبدیلی کے بعد، تمام پی ڈی ایف صفحات ڈاؤن لوڈ کے قابل تصاویر بن جاتے ہیں۔
عملی استعمال کے لیے اہم نوٹ
بڑے پی ڈی ایف کے ساتھ کام کرتے وقت کارکردگی اور میموری کا استعمال اہم ہے۔
بہت سے صفحات والے دستاویزات میں رینڈرنگ کی رفتار سست ہو سکتی ہے اگر ہر چیز پر ایک ساتھ کارروائی کی جائے۔
ایک عملی اصلاح یہ ہے کہ پوری دستاویز کو فوری طور پر پیش کرنے کے بجائے مراحل میں صفحات پر کارروائی کی جائے۔
مثال کے طور پر:
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
// render page
}
یہ آپ کے براؤزر کی میموری کے استعمال کو مزید مستحکم رکھے گا۔
ایک اور مفید اصلاح بڑی دستاویزات کے رینڈرنگ پیمانے کو کم کرنا ہے۔
مثال کے طور پر:
const viewport = page.getViewport({
scale: 1.5
});
کم پیمانے کی اقدار چھوٹی تصویری فائلیں تیار کرتی ہیں اور کارکردگی کو بہتر کرتی ہیں۔
آپ برآمد کرنے سے پہلے تیار کردہ تصویر کا سائز بھی تبدیل کر سکتے ہیں۔
مثال کے طور پر:
canvas.width = viewport.width;
canvas.height = viewport.height;
اس سے فائل کے سائز کی غیر ضروری ترقی کو کم کرنے میں مدد ملتی ہے۔
چونکہ ہر چیز براؤزر کے اندر مقامی طور پر چلتی ہے، اس لیے اپ لوڈ کردہ پی ڈی ایف فائلیں صارف کے آلے کو کبھی نہیں چھوڑتی ہیں، جس سے رازداری اور سیکیورٹی میں اضافہ ہوتا ہے۔
سے بچنے کے لیے عام غلطیاں
ایک عام غلطی یہ ہے کہ اپ لوڈ کردہ فائلوں پر کارروائی کرنے سے پہلے ان کی توثیق نہ کی جائے۔
مثال کے طور پر:
if (!file || file.type !== "application/pdf") {
alert("Please upload a valid PDF file.");
return;
}
یہ غیر معاون فائلوں کی وجہ سے ٹول کو کریش ہونے سے روکے گا۔
ایک اور مسئلہ بہت بڑے صفحات کو انتہائی اعلیٰ اقدار کے ساتھ پیش کرنا ہے۔
بڑے کینوس کو پیش کرنے سے بہت زیادہ میموری استعمال ہو سکتی ہے اور تبدیلی کو نمایاں طور پر سست کر دیا جا سکتا ہے۔
عام طور پر، چھوٹے پیمانے پر اقدار کا استعمال کارکردگی کو بہتر بناتا ہے۔
ایک اور عام غلطی تصویر برآمد کرنے سے پہلے صفحہ کے رینڈر ہونے کا انتظار کرنا بھول جانا ہے۔
مثال کے طور پر:
await page.render({
canvasContext: context,
viewport: viewport
}).promise;
بغیر awaitرینڈرنگ مکمل ہونے سے پہلے آپ امیجز ایکسپورٹ کر سکتے ہیں۔
فائل کا غلط نام بھی صارفین کو الجھن میں ڈال سکتا ہے جب متعدد صفحات تیار ہوتے ہیں۔
فائل کے نام میں صفحہ نمبر شامل کرنے سے تنظیم بہتر ہوتی ہے۔
link.download = `page-${pageNumber}.jpg`;
نتیجہ
اس ٹیوٹوریل میں، ہم نے جاوا اسکرپٹ کا استعمال کرتے ہوئے براؤزر پر مبنی پی ڈی ایف ٹو امیج کنورٹر بنایا ہے۔
آپ نے پی ڈی ایف فائلوں کو اپ لوڈ کرنے، براؤزر میں صفحات کو رینڈر کرنے، تصاویر بنانے اور بیک اینڈ سرور کا استعمال کیے بغیر انہیں براہ راست ڈاؤن لوڈ کرنے کا طریقہ سیکھا۔
مزید اہم بات یہ ہے کہ ہم نے دیکھا ہے کہ کس طرح جدید براؤزرز صارف کی فائلوں کو نجی رکھتے ہوئے مقامی طور پر دستاویز پراسیسنگ کے کاموں کو سنبھال سکتے ہیں۔
یہ نقطہ نظر ٹول کو تیز، ہلکا پھلکا اور استعمال میں آسان بناتا ہے۔
اس ورک فلو کو سمجھنے کے بعد، آپ زپ ڈاؤن لوڈ، بیچ ایکسپورٹ، صفحہ کا انتخاب، واٹر مارکنگ، یا امیج کمپریشن جیسی خصوصیات کے ساتھ اسے مزید بڑھا سکتے ہیں۔
آپ یہاں ایک ورکنگ ورژن بھی آزما سکتے ہیں۔
https://allinonetools.net/pdf-to-image-converter/
اور یہیں سے چیزیں واقعی دلچسپ ہونے لگتی ہیں۔