#eTubeGuideBangla : ব্লগার ওয়েবসাইটে কিভাবে একটি পটভূমি রিমুভার ওয়েব অ্যাপ তৈরি করবেন

» #eTubeGuideBangla ভিডিও বিবরণ :

ব্লগার ওয়েবসাইটে একটি পটভূমি রিমুভার (Background Remover) ওয়েব অ্যাপ তৈরি করা একটু চ্যালেঞ্জিং হতে পারে, তবে HTML, CSS, এবং JavaScript (বিশেষ করে API ব্যবহার করে) দিয়ে আপনি এটি তৈরি করতে পারেন। এখানে একটি সাধারণ গাইড দেওয়া হচ্ছে যেভাবে আপনি ব্লগার সাইটে পটভূমি রিমুভার ওয়েব অ্যাপ যুক্ত করতে পারেন।

Step 1: ব্লগার ড্যাশবোর্ডে লগইন করুন

Blogger.com এ গিয়ে আপনার অ্যাকাউন্টে লগইন করুন।
আপনার ব্লগ সিলেক্ট করুন।

Step 2: HTML / Template এ কোড প্রবেশ করুন

ব্লগ ড্যাশবোর্ড থেকে Theme বা থিম অপশন সিলেক্ট করুন।
তারপর, Customize বা কাস্টমাইজ বাটনে ক্লিক করুন।
Edit HTML বা এইচটিএমএল এডিট বাটনে ক্লিক করুন।

Step 3: কোড যুক্ত করা

আমরা পটভূমি রিমুভার অ্যাপ তৈরি করতে সাধারণত API ব্যবহার করি। এমন একটি API হল remove.bg, যা ইমেজ থেকে পটভূমি স্বয়ংক্রিয়ভাবে সরিয়ে দেয়।

HTML + CSS + JavaScript কোড:

এখানে একটি সরল কোড দেওয়া হচ্ছে যা remove.bg API ব্যবহার করে পটভূমি সরাতে সক্ষম হবে।

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Remover App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        input[type="file"] {
            margin-bottom: 20px;
        }
        #outputImage {
            margin-top: 20px;
            width: 300px;
            height: auto;
        }
        .container {
            max-width: 600px;
            margin: auto;
            background-color: #f7f7f7;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        h2 {
            color: #333;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Background Remover</h2>
    <p>Upload an image to remove its background</p>
    <input type="file" id="fileInput">
    <br>
    <button id="removeBgButton">Remove Background</button>
    <br><br>
    <img id="outputImage" src="" alt="Image with removed background">
</div>

<script>
    const fileInput = document.getElementById('fileInput');
    const removeBgButton = document.getElementById('removeBgButton');
    const outputImage = document.getElementById('outputImage');

    // Set up remove.bg API (Note: You need your own API Key)
    const apiKey = 'YOUR_API_KEY_HERE';

    // Handle file input change
    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            // Display image preview
            const reader = new FileReader();
            reader.onload = function (event) {
                outputImage.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // Handle background removal
    removeBgButton.addEventListener('click', async () => {
        const file = fileInput.files[0];
        if (!file) {
            alert('Please select an image file first.');
            return;
        }

        const formData = new FormData();
        formData.append('image_file', file);

        // Call the remove.bg API to remove background
        try {
            const response = await fetch('https://api.remove.bg/v1.0/removebg', {
                method: 'POST',
                headers: {
                    'X-Api-Key': apiKey,
                },
                body: formData,
            });

            const result = await response.blob();
            outputImage.src = URL.createObjectURL(result);
        } catch (error) {
            console.error('Error removing background:', error);
        }
    });
</script>

</body>
</html>

Step 4: কোডের ব্যাখ্যা:

HTML: ব্যবহারকারীরা একটি ছবি আপলোড করতে পারবেন এবং সেই ছবির পটভূমি সরানোর জন্য একটি বাটন থাকবে।
CSS: ছবির ডিজাইন সুন্দর দেখানোর জন্য CSS ব্যবহার করা হয়েছে, যাতে এটি আরও আকর্ষণীয় হয়।
JavaScript: কোডের মধ্যে remove.bg API ব্যবহার করা হয়েছে যা ছবির পটভূমি সরানোর কাজ করবে। আপনি remove.bg API Key পেতে পারেন তাদের অফিশিয়াল ওয়েবসাইট থেকে।

Step 5: কোড সেভ করুন

কোডটি পেস্ট করার পর, ব্লগের HTML টেমপ্লেট সেভ করুন।

Step 6: আপনার ওয়েবসাইটে অ্যাপ ব্যবহার করুন

আপনার ব্লগের ভিজিটররা এখন সহজেই ছবির পটভূমি সরাতে পারবেন, যা তাদের একটি ভালো অভিজ্ঞতা প্রদান করবে।

Note:

remove.bg API ব্যবহারের জন্য আপনাকে একটি API Key নিতে হবে (ফ্রি ট্রায়াল অথবা পেইড প্ল্যানের মাধ্যমে)।
আপনি চাইলে আপনার সাইটে আরও কিছু কাস্টমাইজেশন করতে পারেন, যেমন ইমেজ সাইজ বা ফরম্যাট, অথবা আরও উন্নত ডিজাইন ব্যবহার।

এভাবে, আপনি ব্লগার ওয়েবসাইটে একটি পটভূমি রিমুভার অ্যাপ তৈরি করতে পারেন!

» #eTubeGuideBangla ভিডিও #হ্যাশট্যাগ :

HashTags

#eTubeGuideBangla : ব্লগার ওয়েবসাইটে কিভাবে একটি পটভূমি রিমুভার ওয়েব অ্যাপ তৈরি করবেন

Step 1: ব্লগার ড্যাশবোর্ডে লগইন করুন

Step 2: HTML / Template এ কোড প্রবেশ করুন

Step 3: কোড যুক্ত করা

HTML + CSS + JavaScript কোড:

Step 4: কোডের ব্যাখ্যা:

Step 5: কোড সেভ করুন

Step 6: আপনার ওয়েবসাইটে অ্যাপ ব্যবহার করুন

Note:

Featured Post

#eTubeGuideBangla : Yo.fan এডসেন্স থেকে কিভাবে আয় করবেন বিজ্ঞাপন লোড হচ্ছে বিজ্ঞাপন শো আয় করুন (পর্ব 6)

Popular Posts

#eTubeGuideBangla : কীভাবে স্ক্রিনশট এবং স্ক্রিন ভিডিও রেকর্ডিং করবেন - উইন্ডোজের সাথে পিসি ল্যাপটপে স্ক্রিন

#eTubeGuideBangla : techvids.in ব্লগস্পট থিম অ্যাডসেন্স প্রতিক্রিয়াশীল হিসাবে লাইক এর জন্য ডাউনলোড করুন

#eTubeGuideBangla : ব্লগস্পট প্রধান পৃষ্ঠার হোমপেজে পোস্টের সংখ্যা কীভাবে যুক্ত করবেন

#eTubeGuideBangla : কিভাবে ব্লগার ওয়েবসাইট থেকে আয় করা সংক্ষিপ্ত বিজ্ঞাপনের URL করবেন (Part2)

#eTubeGuideBangla : লিঙ্কডইন শেয়ার পোস্টে ইউটিউব ভিডিও র‌্যাঙ্কিংয়ের জন্য কীভাবে লিঙ্কডইন ইউআরএল শেয়ারিং ট্রিকস করবেন

Label

Most Recent

➡️Watching Now Tech Videos Tips and Tricks

Labels

» Views Counter

» Privacy Website Info :

😎ꙅʞᴎi⅃ ɘƚiꙅdɘW ƚᴎɒƚɿoqmI彡

no-style

» eTech Script (Telegram Ch.)

About Us For "Tutorial Hub"

Follow Us

Footer Copyright

Contact form