ইমেজ লিংক ব্যবহার করে কিভাবে ইমেজ কম্পিউটারে ডাউনলোড করা যায়। How to download image from a image link

ধর আমার একটা ইমেজের লিংক আছে যেটা কোন ওয়েবসাইটে আপলোড করা আছে। আমি চাচ্ছি আমি সেই ইমেজের লিংক ব্যবহার করে রিয়াক্ট ওয়েবসাইটে দেখাব এবং সবচেয়ে গুরুত্বপূর্ণ বিষয় হল আমি সেটা ডাউনলোড করব। এটা আমরা দুইভাবে করতে পারি।

1. npm ইনষ্টল করে থার্ড পার্টির মাধ্যমে (অনেক সহজ এবং কম কোড করা লাগে। সবসময় এটা ফলো করবে)।
2. সরাসরি কোড করে। (বুঝে বুঝে করার জন্য)
3. node.js ফাইলে এই CorsOption সেটিংসটা না করলে ইমেজ ডাউনলোড হবে না। cors ইরোর দেখাবে। সো সবার শেষে এটাও অবশ্যই দেখে নেবে।

বিঃদ্রঃ ইমেজ যখন ডাউনলোড হয়ে তোমার ল্যাপটপের Desktop বা Download ফল্ডোরে সেভ হবে। তখন তুমি সেখান থেকে অন করতে চাইলে ইমেজ অনেকসময় দেখা যাবে না। অর্থা ইমেজ ব্লাক স্ক্রিন হয়ে যাবে। এমতা অবস্থায় ইমেজকে C drive ব্যতীত অন্য যে কোন আরেকটি ড্রাইভে কপি/কাট করে নিয়ে রাখলে তখন আবার ইমেজ অন করলে ইমেজ অন হবে।

প্রথমে দেখাচ্ছি লাইব্রেরী ব্যবহার করে কিভাবে করা যায়। ধরে নিচ্ছি আমার একটা ImageDownloader নামে রিয়াক্টের কম্পোনেন্ট আছে। এখন সেটার ভিতর ইমেজ ডাউনলোডের কাজ নিম্নের মাধ্যমে করতে পারিঃ 

১ম পদ্ধতির Code:

import React from 'react';
import { saveAs } from 'file-saver';

const ImageDownloader = ({ imageUrl }) => {
    const downloadImage = async () => {
        try {
            // Fetch the image data as a Blob
            const response = await fetch(`https://lh3.googleusercontent.com/d/${imageUrl}`);
            const blob = await response.blob();

            // Check the Blob type and ensure it's an image
            if (!blob.type.startsWith('image/')) {
                console.error('The fetched file is not recognized as an image');
                return;
            }

            // Use file-saver to handle the download and save
            saveAs(blob, 'downloaded-image.jpg');
        } catch (error) {
            console.error('Error downloading the image:', error);
        }
    };

    return (
        <div>
            <img className='img-fluid' src={`https://lh3.googleusercontent.com/d/${imageUrl}`} alt="" />
            <button onClick={downloadImage}>Download Image</button>
        </div>
    );
};

export default ImageDownloader;

এখন দেখব ২য় পদ্ধতি অনুসরণ করে খুব সহজে কিভাবে একই কাজ করতে পারিঃ

২য় পদ্ধতির Code:

import React from 'react';

const ImageDownloader = ({ imageUrl }) => {
    const downloadImage = async () => {
        try {
            // Fetch the image data as a Blob
            const response = await fetch(`https://lh3.googleusercontent.com/d/${imageUrl}`);
            const blob = await response.blob();

            // Ensure the Blob is correctly handled
            const mimeType = blob.type; // Get the MIME type of the image
            if (!mimeType.startsWith('image/')) {
                throw new Error('The fetched file is not an image');
            }

            // Create a temporary URL for the Blob
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'downloaded-image.jpg'; // Set the filename for the download
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            // Revoke the temporary URL to free up resources
            window.URL.revokeObjectURL(url);
        } catch (error) {
            console.error('Error downloading the image:', error);
        }
    };

    return (
        <div>
            <img className='img-fluid' src={`https://lh3.googleusercontent.com/d/${imageUrl}`} alt="" />
            <button onClick={downloadImage}>Download Image</button>
        </div>
    );
};

export default ImageDownloader;

যদি ব্যাকইন্ড ব্যবহার কর তাহলে সবার শেষে ব্যাকইন্ডে node.js ফাইলে এই CorsOption সেটিংসটা না করলে ইমেজ ডাউনলোড হবে না। cors ইরোর দেখাবে। সো সবার শেষে এটাও অবশ্যই দেখে নেবে।

const express = require('express');
const app = express();
const cors = require('cors');
require('dotenv').config();
const { ObjectId } = require('mongodb');
const port = process.env.PORT || 5000;

// it is used for downloading images from the link. If I don't use it, there will be a CORS error and the image could not be downloaded.
const corsOptions = {
    origin: '*',
    credentials: true,            // access-control-allow-credentials:true
    optionSuccessStatus: 200,
}

// middleware
app.use(cors(corsOptions));
app.use(express.json());