কিভাবে JPG to PDF Converter টুল তৈরি করবেন রেসপন্স কোডিং সহ
কিভাবে JPG to PDF Converter টুল তৈরি করবেন রেসপন্স কোডিং সহ
এই আর্টিকেলটিতে কিভাবে জেপিজি টু পিডিএফ কনভার্টার টুল JPG to PDF Converter তৈরি করবেন সেই সম্পর্কে কোডিং সহ আলোচনা করা হয়েছে।
JPG to PDF Converter
JPG to PDF রূপান্তরকারী।
রেসপন্স কোডিং সহ কিভাবে JPG থেকে PDF Converter টুল তৈরি করবেন
একটি JPG to PDF Converter টুল তৈরি করতে, আপনাকে কিছু কোড লিখতে হবে যা JPG ফাইলগুলিতে পড়তে পারে এবং একটি PDF নথি আউটপুট করতে পারে। পাইথন এবং পিলো লাইব্রেরি ব্যবহার করে আপনি কীভাবে এটি করতে পারেন তার একটি উদাহরণ এখানে রয়েছে:
JPG to PDF Converter Python কোড কপি করুন
পিআইএল আমদানি ছবি থেকে
ওএস আমদানি করুন
def convert_jpg_to_pdf(input_path, output_path):
image = Image.open(input_path)
pdf_path = os.path.splitext(output_path)[0] + “.pdf”
image.save(pdf_path, “PDF” ,resolution=100.0)
# উদাহরণ ব্যবহার
রূপান্তর_jpg_to_pdf(“input.jpg”, “output.pdf”)
এই কোডে, আমরা প্রথমে প্রয়োজনীয় লাইব্রেরি আমদানি করি। তারপর, আমরা একটি ফাংশন convert_jpg_to_pdf সংজ্ঞায়িত করি যা দুটি আর্গুমেন্ট নেয় – JPG ফাইলের ইনপুট পাথ এবং PDF ফাইলের আউটপুট পাথ।
তারপর আমরা JPG ইমেজে পড়ার জন্য পিলো লাইব্রেরি থেকে ইমেজ ক্লাস ব্যবহার করি। আমরা আউটপুট পাথের বেস নাম পেতে os মডিউল ব্যবহার করি এবং এতে .pdf এক্সটেনশন যোগ করি।
অবশেষে, আমরা ইমেজ ক্লাসের সেভ মেথড ব্যবহার করে ইমেজটিকে পিডিএফ হিসেবে সেভ করি। আমরা আউটপুট পিডিএফ পাথে পাস করি, “পিডিএফ” হিসাবে বিন্যাসটি নির্দিষ্ট করি এবং রেজোলিউশনটি 100 ডিপিআইতে সেট করি।
আপনি ইনপুট ফাইল পাথের একটি তালিকার উপর পুনরাবৃত্তি করে এবং প্রতিটি ফাইলে convert_jpg_to_pdf ফাংশন কল করে একাধিক JPG ফাইলের সাথে কাজ করার জন্য এই কোডটি পরিবর্তন করতে পারেন। রূপান্তর প্রক্রিয়া চলাকালীন যে কোনো ব্যতিক্রম ঘটতে পারে তা ধরতে আপনি ত্রুটি পরিচালনার কোড যোগ করতে পারেন।
প্রতিক্রিয়াশীল কোড যোগ করুন
JPG থেকে PDF Converter টুলকে প্রতিক্রিয়াশীল করতে, আপনি HTML এবং CSS ব্যবহার করে একটি ব্যবহারকারী ইন্টারফেস তৈরি করতে পারেন যা বিভিন্ন স্ক্রীনের আকারের সাথে খাপ খায়। টুলটিকে প্রতিক্রিয়াশীল করতে আপনি কীভাবে HTML এবং CSS কোড পরিবর্তন করতে পারেন তার একটি উদাহরণ এখানে রয়েছে
JPG to PDF Converter html কোড কপি করুন
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>JPG to PDF Converter</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
form {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
}
input[type=”file”] {
display: none;
}
.upload-btn {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
}
.upload-btn:hover {
background-color: #3e8e41;
}
.file-name {
margin-bottom: 10px;
}
.submit-btn {
display: block;
background-color: #008CBA;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
.submit-btn:hover {
background-color: #007a99;
}
</style>
</head>
<body>
<div class=”container”>
<h1>JPG to PDF Converter</h1>
<form id=”convert-form”>
<div class=”file-upload”>
<label for=”file-upload” class=”upload-btn”>Choose file</label>
<input type=”file” id=”file-upload” accept=”image/jpeg” />
<div class=”file-name”></div>
</div>
<button type=”submit” class=”submit-btn”>Convert</button>
</form>
</div>
<script>
const fileUpload = document.getElementById(‘file-upload’);
const fileName = document.querySelector(‘.file-name’);
fileUpload.addEventListener(‘change’, function() {
fileName.textContent = this.files[0].name;
});
const convertForm = document.getElementById(‘convert-form’);
convertForm.addEventListener(‘submit’, function(event) {
event.preventDefault();
const file = fileUpload.files[0];
if (file) {
const formData = new FormData();
formData.append(‘file’, file);
const xhr = new XMLHttpRequest();
xhr.open(‘POST’, ‘/convert’, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
window.location = xhr.responseText;
}
};
xhr.send(formData);
}
});
</script>
</body>
</html>
এই কোডে, আমরা ভিউপোর্ট মেটা ট্যাগ ব্যবহার করি পৃষ্ঠার প্রস্থ ডিভাইসের স্ক্রিনের প্রস্থে সেট করতে। এছাড়াও আমরা কন্টেইনার উপাদানের জন্য সর্বাধিক-প্রস্থ নির্ধারণ করতে CSS ব্যবহার করি এবং এটিকে কেন্দ্রে রাখতে এর মার্জিন সম্পত্তি অটোতে সেট করি
আরো প্রতিক্রিয়াশীল কোড যোগ করুন
পূর্ববর্তী প্রতিক্রিয়া থেকে অবিরত, আপনি বিভিন্ন স্ক্রীন আকারের জন্য বিভিন্ন শৈলী সংজ্ঞায়িত করতে CSS মিডিয়া ক্যোয়ারী ব্যবহার করে JPG থেকে PDF Converter টুলের প্রতিক্রিয়াশীলতা আরও উন্নত করতে পারেন। টুলটিকে আরও বেশি প্রতিক্রিয়াশীল করতে আপনি কীভাবে CSS কোড পরিবর্তন করতে পারেন তার একটি উদাহরণ এখানে দেওয়া হল:
JPG to PDF Converter CSS কোড কপি করুন
css
Copy code
@media only screen and (max-width: 600px) {
.container {
max-width: 100%;
padding: 10px;
}
h1 {
font-size: 28px;
}
.upload-btn {
margin-right: 0;
margin-bottom: 5px;
}
}
@media only screen and (max-width: 400px) {
h1 {
font-size: 24px;
}
.upload-btn {
font-size: 14px;
padding: 8px 14px;
}
.submit-btn {
font-size: 14px;
padding: 8px 14px;
margin-top: 10px;
}
}
এই কোডে, আমরা বিভিন্ন স্ক্রিনের আকারের জন্য বিভিন্ন শৈলী সংজ্ঞায়িত করতে @media নিয়ম ব্যবহার করি।
প্রথম @media নিয়মে, আমরা কন্টেইনারের সর্বোচ্চ প্রস্থ 100% সেট করি এবং ছোট পর্দায় ফর্ম উপাদানগুলিকে আরও কমপ্যাক্ট করতে প্যাডিং কমিয়ে দেই। আমরা শিরোনাম এবং আপলোড বোতামের ফন্টের আকারও কমিয়ে দিই এবং আপলোড বোতামের ডান মার্জিনটি সরিয়ে দিই।
দ্বিতীয় @media নিয়মে, আমরা আপলোডের ফন্টের আকার এবং প্যাডিং আরও কমিয়ে দিই এবং খুব ছোট স্ক্রিনে আরও পঠনযোগ্য করার জন্য বোতামগুলি জমা দিই।
আপনি আপনার নির্দিষ্ট প্রয়োজন অনুসারে এই শৈলীগুলি সংশোধন করতে পারেন এবং আপনার লক্ষ্য দর্শকদের স্ক্রীনের আকারের সাথে মেলে ব্রেকপয়েন্টগুলি সামঞ্জস্য করতে পারেন।
উপরে দেওয়া দুটি কোডের মধ্যে যে কোন একটি কোড ব্যবহার করে JPG to PDF Converter এই টুলটি তৈরি করতে পারেন।
