چاہے وہ اسکین شدہ دستاویزات، اسکرین شاٹس، رسیدیں، نوٹس، سرٹیفکیٹس، یا متعدد تصاویر ہوں، صارفین کو اکثر تصاویر کو ڈاؤن لوڈ کے قابل پی ڈی ایف میں یکجا کرنے کے لیے فوری طریقہ کی ضرورت ہوتی ہے۔
جدید براؤزرز میں یہ کام پہلے سے کہیں زیادہ آسان ہے۔
فائلوں کو سرور پر اپ لوڈ کرنے کے بجائے، اب آپ JavaScript کا استعمال کرتے ہوئے براہ راست اپنے براؤزر میں تصاویر پر کارروائی کر سکتے ہیں۔ یہ ٹول کو تیز، نجی اور استعمال میں آسان بنا دیتا ہے۔
اس ٹیوٹوریل میں، ہم جاوا اسکرپٹ کا استعمال کرتے ہوئے پی ڈی ایف کنورٹر میں براؤزر پر مبنی تصویر بنائیں گے۔
یہ ٹول متعدد تصاویر اپ لوڈ کرنے، فائلوں کو چھانٹنے، اورینٹیشن اور صفحہ کا سائز منتخب کرنے، مارجن کو ترتیب دینے، اور تصاویر کو ایک پی ڈی ایف یا علیحدہ پی ڈی ایف فائلوں میں ضم کرنے میں معاونت کرتا ہے۔ صارفین اپنے براؤزر میں تیار کردہ دستاویزات کا براہ راست جائزہ اور ڈاؤن لوڈ بھی کر سکتے ہیں۔
سب کچھ مکمل طور پر کلائنٹ کی طرف چلتا ہے، بغیر کسی پسدید کے۔
انڈیکس
-
تصاویر کو پی ڈی ایف میں کیسے تبدیل کریں۔
-
پروجیکٹ کی ترتیبات
-
ہم کون سی لائبریری استعمال کر رہے ہیں؟
-
اپ لوڈ انٹرفیس بنائیں
-
اپ لوڈ کردہ تصاویر پڑھیں
-
پی ڈی ایف تخلیق
-
ایک سے زیادہ امیج پروسیسنگ
-
پی ڈی ایف کی ترتیبات کو ترتیب دیں۔
-
نام تبدیل کریں اور پی ڈی ایف ڈاؤن لوڈ کریں۔
-
ڈیمو: پی ڈی ایف کنورٹر کی تصویر کیسے کام کرتی ہے۔
-
عملی استعمال کے لیے اہم نوٹ
-
سے بچنے کے لئے عام غلطیاں
-
نتیجہ
تصاویر کو پی ڈی ایف میں کیسے تبدیل کریں۔
براؤزر خود تصاویر کو براہ راست پی ڈی ایف میں جوڑ نہیں سکتا۔
اس کے بجائے، ہم ایک JavaScript PDF لائبریری استعمال کریں گے جو صفحات بناتی ہے، تصاویر داخل کرتی ہے، اور ہر چیز کو ڈاؤن لوڈ کے قابل PDF دستاویز کے طور پر برآمد کرتی ہے۔
یہ عمل اس وقت شروع ہوتا ہے جب صارف براؤزر پر ایک یا زیادہ تصاویر اپ لوڈ کرتا ہے۔ جاوا اسکرپٹ پھر تصویر کا ڈیٹا پڑھتا ہے اور اسے پی ڈی ایف بنانے کے لیے تیار کرتا ہے۔ اس کے بعد، ٹول پی ڈی ایف پیجز بناتا ہے، اپ لوڈ کردہ تصاویر کو ان پیجز میں داخل کرتا ہے، اور آخر کار ہر چیز کو ڈاؤن لوڈ کے قابل PDF دستاویز کے طور پر ایکسپورٹ کرتا ہے۔
براؤزر کے اندر سب کچھ مقامی طور پر ہوتا ہے۔
اس کا مطلب ہے کہ صارفین کو اپنی ذاتی فائلوں کو سرور پر اپ لوڈ کرنے کی ضرورت نہیں ہے، جس سے اس عمل کو تیز تر اور پرائیویسی دوستانہ ہو جائے گا۔
پروجیکٹ کی ترتیبات
یہ منصوبہ جان بوجھ کر آسان ہے۔
آپ سب کی ضرورت ہے:
-
ایچ ٹی ایم ایل فائل
-
جاوا اسکرپٹ فائل
-
پی ڈی ایف لائبریری
کوئی بیک اینڈ یا ڈیٹا بیس کی ضرورت نہیں ہے۔
ہم کون سی لائبریری استعمال کر رہے ہیں؟
ہم jsPDF لائبریری استعمال کریں گے۔ یہ آپ کو جاوا اسکرپٹ سے براہ راست پی ڈی ایف فائلیں بنانے کی اجازت دیتا ہے۔
CDN کا استعمال کرتے ہوئے شامل کریں۔
ایک بار لوڈ ہونے کے بعد، آپ اپنے براؤزر سے براہ راست پی ڈی ایف فائلیں بنا اور برآمد کر سکتے ہیں۔
اپ لوڈ انٹرفیس بنائیں
ڈیفالٹ اپ لوڈ ایریا سے شروع کریں۔
یہ صارفین کو متعدد تصویری فائلیں اپ لوڈ کرنے اور پی ڈی ایف بنانے کی اجازت دیتا ہے۔
ٹول کے اندر اپ لوڈ سیکشن اس طرح لگتا ہے:
آپ الائنمنٹ، پیج سیٹ اپ، مارجنز، اور مرج موڈز کے لیے اضافی کنٹرولز کے ساتھ انٹرفیس کو بھی بڑھا سکتے ہیں۔
اپ لوڈ کردہ تصاویر پڑھیں
صارف کے فائل منتخب کرنے کے بعد، آپ کو اسے JavaScript کے ساتھ پڑھنا ہوگا۔
ہم استعمال کر سکتے ہیں FileReader اس کے لیے:
const fileInput = document.getElementById("upload");
const files = fileInput.files;
for (const file of files) {
const reader = new FileReader();
reader.onload = function (e) {
const imageData = e.target.result;
console.log(imageData);
};
reader.readAsDataURL(file);
}
یہ اپ لوڈ کردہ تصاویر کو پڑھنے کے قابل بیس 64 ڈیٹا میں تبدیل کرتا ہے جسے بعد میں پی ڈی ایف میں داخل کیا جا سکتا ہے۔
پی ڈی ایف تخلیق
اب آپ پی ڈی ایف دستاویزات بنا سکتے ہیں۔
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
ایک بار جب آپ کی پی ڈی ایف بن جاتی ہے، آپ صفحات میں تصاویر ڈال سکتے ہیں۔
pdf.addImage(imageData, "JPEG", 10, 10, 180, 120);
اپ لوڈ کی گئی تصویر کو پی ڈی ایف پیج میں مخصوص جگہ اور سائز میں ڈالا جائے گا۔
آخر میں، دستاویز برآمد کریں.
pdf.save("images.pdf");
اس کے بعد تیار کردہ پی ڈی ایف فوری طور پر ڈاؤن لوڈ ہو جائے گی۔
ایک سے زیادہ امیج پروسیسنگ
اگر کوئی صارف متعدد فائلیں اپ لوڈ کرتا ہے، تو ہر تصویر خود بخود اس کے اپنے پی ڈی ایف صفحہ میں شامل کی جا سکتی ہے۔
مثال کے طور پر:
files.forEach((file, index) => {
if (index !== 0) {
pdf.addPage();
}
});
دستاویز میں اگلی تصویر ڈالنے سے پہلے ایک نیا صفحہ بنایا جاتا ہے۔
کچھ حالات میں، صارف فی صفحہ ایک تصویر کے بجائے ایک ہی صفحہ پر متعدد تصاویر چاہتا ہے۔
مثال کے طور پر:
pdf.addImage(img1, "JPEG", 10, 20, 80, 80);
pdf.addImage(img2, "JPEG", 110, 20, 80, 80);
یہ گیلریوں، رپورٹوں، یا گروپ شدہ دستاویزات کے لیے مزید لچکدار ترتیب کی اجازت دیتا ہے۔
پی ڈی ایف کی ترتیبات کو ترتیب دیں۔
حتمی پی ڈی ایف بنانے سے پہلے، صارف کئی ترتیب اور آؤٹ پٹ سیٹنگز کو اپنی مرضی کے مطابق بنا سکتے ہیں۔
یہ ترتیبات دستاویز کے معیار کو بہتر بناتی ہیں اور صارفین کو تیار کردہ فائلوں پر زیادہ کنٹرول دیتی ہیں۔
ٹول کے اندر کنفیگریشن پینل اس طرح لگتا ہے:
تصویر کی چھانٹی
اگر آپ ایک سے زیادہ تصاویر اپ لوڈ کر رہے ہیں، تو پی ڈی ایف بنانے سے پہلے انہیں مناسب طریقے سے ترتیب دینا ضروری ہے۔
صارفین تصاویر کو حروف تہجی کے مطابق ترتیب دے سکتے ہیں، انہیں دوبارہ ترتیب دے سکتے ہیں، یا فائل کے سائز کے مطابق ترتیب دے سکتے ہیں۔
مثال کے طور پر، تصاویر کو حروف تہجی کے مطابق اس طرح ترتیب دیا جا سکتا ہے:
files.sort((a, b) => a.name.localeCompare(b.name));
آپ فائلوں کو سائز کے لحاظ سے بھی ترتیب دے سکتے ہیں۔
files.sort((a, b) => a.size - b.size);
ذیل میں ٹول کے اندر چھانٹنے کے اختیارات کی ایک مثال ہے۔
یہ صارفین کو اپنی دستاویزات کو پی ڈی ایف میں تبدیل کرنے سے پہلے زیادہ مؤثر طریقے سے ترتیب دینے کی اجازت دیتا ہے۔
سمت منتخب کریں۔
مختلف تصاویر مختلف صفحہ کی سمت میں بہتر کام کرتی ہیں۔
پورٹریٹ اورینٹیشن لمبی تصاویر کے لیے بہتر ہے، جبکہ زمین کی تزئین کی واقفیت وسیع تصاویر کے لیے بہتر ہے۔
مثال کے طور پر:
const pdf = new jsPDF({
orientation: "portrait"
});
آپ اس پر بھی سوئچ کر سکتے ہیں: "landscape" جب ضرورت ہو۔
ذیل میں ٹول داخلی واقفیت کے اختیارات کی ایک مثال ہے:
صفحہ کا سائز منتخب کریں۔
پی ڈی ایف صفحہ کا سائز تیار کردہ دستاویز کے سائز کو کنٹرول کرتا ہے۔
مثال کے طور پر:
const pdf = new jsPDF({
unit: "mm",
format: "a4"
});
ملی میٹر کا استعمال کرتے ہوئے A4 سائز کی PDF دستاویزات بنائیں۔
دوسرے فارمیٹس جیسے خط، قانونی، یا حسب ضرورت صفحہ کے سائز کو بھی سپورٹ کیا جا سکتا ہے۔
ذیل میں ٹول کے اندر صفحہ کے سائز کا اختیار منتخب کرنے کی ایک مثال ہے۔
مارجن شامل کریں۔
حاشیہ تصویر اور صفحہ کے کنارے کے درمیان جگہ بناتا ہے۔
حاشیے کے بغیر، تصویر سرحد تک پہنچ سکتی ہے اور تنگ نظر آتی ہے۔
مثال کے طور پر:
const margin = 10;
pdf.addImage(imageData, "JPEG", margin, margin, 180, 120);
یہاں ٹول کے اندر مارجن کے اختیارات کی ایک مثال ہے:
یہ داخل کردہ تصویر کے ارد گرد ایک صاف خلا پیدا کرتا ہے۔
خودکار امیج فٹنگ
تصاویر سے پی ڈی ایف بناتے وقت ایک عام مسئلہ غلط سائز ہے۔
اگر آپ ایک مقررہ سائز میں تصویر داخل کرتے ہیں، تو تصویر پھیل سکتی ہے، صفحہ پر پھیل سکتی ہے، یا بگڑی ہوئی دکھائی دے سکتی ہے۔
اس کے بجائے، متحرک طور پر تصویر کے سائز کا حساب لگانا بہتر ہے۔
مثال کے طور پر:
const pageWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pageWidth - 20;
const imgHeight = (image.height * imgWidth) / image.width;
pdf.addImage(imageData, "JPEG", 10, 10, imgWidth, imgHeight);
مارجن اور لے آؤٹ کی مستقل مزاجی کو برقرار رکھتے ہوئے خودکار طور پر تصاویر کی پیمائش کرتا ہے۔
اختیارات کو ضم کریں۔
ایک مفید خصوصیت مختلف آؤٹ پٹ طریقوں کی اجازت دے رہی ہے۔
مثال کے طور پر، رپورٹس، نوٹس، یا مشترکہ فائلیں بناتے وقت صارف تمام اپ لوڈ کردہ تصاویر کو ایک پی ڈی ایف دستاویز میں ضم کر سکتے ہیں۔
کچھ معاملات میں، صارف ہر چیز کو یکجا کرنے کے بجائے ہر تصویر کے لیے علیحدہ پی ڈی ایف بنانے کو ترجیح دے سکتے ہیں۔ انفرادی دستاویزات یا اسکین شدہ صفحات کو برآمد کرتے وقت یہ کارآمد ثابت ہوسکتا ہے۔
حسب ضرورت گروپنگ ایک اور مفید آپشن ہے کیونکہ یہ صارفین کو منتخب تصاویر کو ان کے اپنے ترتیب یا زمرے کے مطابق متعدد پی ڈی ایف میں یکجا کرنے کی اجازت دیتا ہے۔
یہ مختلف آؤٹ پٹ موڈز ٹول کو حقیقی دنیا کے استعمال کے مختلف کیسز کے لیے بہت زیادہ لچکدار بناتے ہیں۔
ایک سادہ سلیکشن ڈراپ ڈاؤن ٹھیک کام کرتا ہے۔
ایک بار منتخب ہونے کے بعد، JavaScript منتخب کردہ موڈ کے لحاظ سے تخلیق کی مختلف منطق کا اطلاق کر سکتا ہے۔
یہاں ٹول کے اندر مرج موڈ آپشن کی ایک مثال ہے:
یہ ٹول کو مختلف دستاویزات کے ورک فلو کو زیادہ لچکدار طریقے سے سنبھالنے کی اجازت دیتا ہے۔
نام تبدیل کریں اور پی ڈی ایف ڈاؤن لوڈ کریں۔
دستاویز بنانے کے بعد، صارف اسے ڈاؤن لوڈ کرنے سے پہلے فائل کا نام تبدیل کر سکتے ہیں۔
آپ اس طرح ایک فائل کے نام کے لئے اشارہ کر سکتے ہیں:
const fileName = prompt("Enter PDF name:", "images");
pdf.save(`${fileName}.pdf`);
اس سے صارفین کو ان کی برآمد شدہ فائلوں پر زیادہ کنٹرول ملتا ہے۔
ذیل میں ٹول نام تبدیل کرنے والے پاپ اپ کی ایک مثال ہے۔
مرحلہ 1: اپنی تصویر اپ لوڈ کریں۔
صارف براؤزر پر مبنی ٹول پر ایک یا زیادہ تصویری فائلیں اپ لوڈ کرتے ہیں۔
یہ ٹول عام فارمیٹس جیسے JPG، PNG، اور WEBP کو سپورٹ کرتا ہے۔
مرحلہ 2: پی ڈی ایف کی ترتیبات کو ترتیب دیں۔
صارفین پی ڈی ایف بنانے سے پہلے ترتیب کی ترتیبات کو اپنی مرضی کے مطابق بنا سکتے ہیں۔
ان میں شامل ہیں:
-
تصویر کی چھانٹی
-
واقفیت
-
صفحہ کا سائز
-
خالی
-
ضم موڈ
یہ ترتیبات کلینر پی ڈی ایف آؤٹ پٹ بنانے میں مدد کرتی ہیں۔
مرحلہ 3: پی ڈی ایف بنائیں
سیٹنگز کنفیگر ہونے کے بعد، صارفین کنورٹ بٹن پر کلک کرتے ہیں۔
براؤزر تمام اپ لوڈ کردہ تصاویر کو مقامی طور پر پروسیس کرتا ہے اور فوری طور پر پی ڈی ایف بناتا ہے۔
مرحلہ 4: تیار کردہ فائلوں کا نام تبدیل کریں۔
ڈاؤن لوڈ کرنے سے پہلے، صارف تیار کردہ پی ڈی ایف کا نام بدل سکتے ہیں۔
متعدد دستاویزات برآمد کرتے وقت یہ تنظیم کو بہتر بناتا ہے۔
مرحلہ 5: پی ڈی ایف ڈاؤن لوڈ کریں۔
آخر میں، آپ تخلیق شدہ پی ڈی ایف کو براہ راست اپنے براؤزر سے ڈاؤن لوڈ کر سکیں گے۔
پورا عمل سرور پر کوئی فائل اپ لوڈ کیے بغیر کام کرتا ہے۔
عملی استعمال کے لیے اہم نوٹ
بڑی تصاویر کے ساتھ کام کرتے وقت کارکردگی اور میموری کا استعمال اہم ہے۔
بڑی تصاویر پی ڈی ایف کی تخلیق کو سست کر سکتی ہیں اور غیر ضروری طور پر بڑی آؤٹ پٹ فائلیں تیار کر سکتی ہیں۔
مثال کے طور پر، آپ پروسیسنگ سے پہلے اپ لوڈ سائز کو محدود کر سکتے ہیں۔
const MAX_SIZE = 10 * 1024 * 1024;
if (file.size > MAX_SIZE) {
alert("Image is too large.");
return;
}
ایک اور مفید اصلاح یہ ہے کہ تصاویر کو پی ڈی ایف میں داخل کرنے سے پہلے ان کا سائز تبدیل کریں۔
مثال کے طور پر:
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = image.width * 0.5;
canvas.height = image.height * 0.5;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
const resizedImage = canvas.toDataURL("image/jpeg", 0.7);
یہ پی ڈی ایف بنانے سے پہلے امیج کا سائز اور کمپریشن کوالٹی کو کم کر دے گا۔
یہ میموری کے استعمال کو بھی کم کرتا ہے اور بڑی فائلوں کے لیے پی ڈی ایف بنانے کی رفتار کو بہتر بناتا ہے۔
چونکہ ہر چیز براہ راست براؤزر کے اندر چلتی ہے، اس لیے اپ لوڈ کردہ تصاویر کبھی بھی صارف کے آلے کو نہیں چھوڑتی ہیں، جس سے رازداری میں اضافہ ہوتا ہے۔
سے بچنے کے لئے عام غلطیاں
ایک عام غلطی یہ ہے کہ اپ لوڈ کردہ فائلوں پر کارروائی کرنے سے پہلے ان کی توثیق نہ کی جائے۔
مثال کے طور پر، صارف ایک غیر تعاون یافتہ فارمیٹ اپ لوڈ کر سکتا ہے یا تصویر کو منتخب کیے بغیر پی ڈی ایف بنانے کی کوشش کر سکتا ہے۔
پروسیسنگ سے پہلے ہمیشہ ان پٹ کی توثیق کریں۔
if (!fileInput.files.length) {
alert("Please upload images first.");
return;
}
ایک اور مسئلہ پہلے ان کا سائز تبدیل کیے بغیر بہت بڑی تصاویر ڈالنا ہے۔
بڑی تصاویر پی ڈی ایف تیار کر سکتی ہیں جو بہت بڑی ہیں اور کارکردگی کو نمایاں طور پر کم کر سکتی ہیں۔
تصویر کی غلط پوزیشننگ بھی عام ہے۔
اگر ڈائمینشنز کو غلط طریقے سے ہارڈ کوڈ کیا گیا ہے، تو تصویر صفحہ پر پھیل سکتی ہے یا مسخ ہو سکتی ہے۔
متحرک تصویر کے سائز اور مارجن کا استعمال ان ترتیب کے مسائل سے بچنے میں مدد کر سکتا ہے۔
نتیجہ
اس ٹیوٹوریل میں، ہم نے جاوا اسکرپٹ کا استعمال کرتے ہوئے پی ڈی ایف کنورٹر میں براؤزر پر مبنی تصویر بنائی ہے۔
آپ نے اپنے براؤزر سے براہ راست تصاویر اپ لوڈ کرنے، پی ڈی ایف دستاویزات بنانے، ترتیب کی ترتیبات کو ترتیب دینے اور فائلوں کو برآمد کرنے کا طریقہ سیکھا۔
زیادہ اہم بات یہ ہے کہ ہم نے دیکھا ہے کہ کس طرح جدید براؤزر کسی بیک اینڈ سرور پر بھروسہ کیے بغیر مقامی طور پر دستاویز کی تخلیق کو سنبھال سکتے ہیں۔
یہ نقطہ نظر ٹول کو تیز، نجی اور استعمال میں آسان رکھتا ہے۔
ایک بار جب آپ اس ورک فلو کو سمجھ لیں، تو آپ کمپریشن، ڈریگ اینڈ ڈراپ چھانٹی، واٹر مارکنگ، بیچ ایکسپورٹ، یا جدید پی ڈی ایف ایڈیٹنگ ٹولز جیسی خصوصیات کا استعمال کرتے ہوئے اسے مزید بڑھا سکتے ہیں۔
آپ یہاں مکمل ورکنگ ورژن بھی آزما سکتے ہیں۔
https://allinonetools.net/image-to-pdf-converter/
اور یہیں سے چیزیں واقعی دلچسپ ہونے لگتی ہیں۔