কিভাবে ছবি পেস্ট করবেন

হ্যারি থিওডুলু

আধুনিক উপায়

অ্যাসিঙ্ক ক্লিপবোর্ড এপিআই ব্যবহার করে

প্রোগ্রামের মাধ্যমে, অর্থাৎ কোনো বাটনে ক্লিক করার পর, ব্যবহারকারীর ক্লিপবোর্ড থেকে ছবি পড়ার জন্য আপনি Async Clipboard API- এর read() মেথডটি ব্যবহার করতে পারেন। যদি ক্লিপবোর্ড থেকে পড়ার অনুমতি আগে থেকে দেওয়া না থাকে, তাহলে navigator.clipboard.read() মেথডটি প্রথমবার কল করার সময় অনুমতির জন্য অনুরোধ করবে।

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      const imageTypes = clipboardItem.types.find(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        const blob = await clipboardItem.getType(imageType);
        // Do something with the image blob.
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

Browser Support

  • ক্রোম: ৭৬।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ১২৭।
  • সাফারি: ১৩.১।

Source

ক্লাসিক উপায়

paste ইভেন্টের জন্য শুনুন

ইমেজ পেস্ট করার প্রচলিত উপায় হলো (সিঙ্ক্রোনাস) ক্লিপবোর্ড এপিআই ব্যবহার করা, যা আপনাকে `Document: paste ইভেন্টের ভেতরে clipboardData ফিল্ডটি অ্যাক্সেস করার সুযোগ দেয়। তবে, এই পদ্ধতির কিছু সীমাবদ্ধতা রয়েছে; যেমন, এটি সিঙ্ক্রোনাস হওয়ার কারণে, প্রচুর পরিমাণে ডেটা পেস্ট করলে পেজটি ব্লক হয়ে যেতে পারে।

document.addEventListener('paste', async (e) => {
  e.preventDefault();

  for (const clipboardItem of e.clipboardData.files) {
    if (clipboardItem.type.startsWith('image/')) {
      // Do something with the image file.
    }
  }
});

Browser Support

  • ক্রোম: ৬৬।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ৬৩।
  • সাফারি: ১৩.১।

Source

প্রগতিশীল উন্নয়ন

যেসব ব্রাউজার অ্যাসিঙ্ক ক্লিপবোর্ড এপিআই (Async Clipboard API) সমর্থন করে না, সেগুলোতে প্রোগ্রাম্যাটিকভাবে (যেমন, কোনো বাটনে ক্লিক করে) ব্যবহারকারীর ক্লিপবোর্ড অ্যাক্সেস করা অসম্ভব। তাই, paste ইভেন্টে ব্যবহারকারীর ক্লিপবোর্ড অ্যাক্সেস করার জন্য, আপনি অ্যাসিঙ্ক ক্লিপবোর্ড এপিআই ব্যবহার করতে পারেন এবং প্রয়োজনে (সিঙ্ক্রোনাস) ক্লিপবোর্ড এপিআই-তে ফিরে যেতে পারেন।

navigator.clipboard.read থেকে আসা ClipboardItem অবজেক্টগুলোতে একটি types ফিল্ড থাকে যা একটি অ্যারে, এবং event.clipboardData.files থেকে আসা File অবজেক্টগুলোতে একটি type ফিল্ড থাকে যা একটি স্ট্রিং। আপনি ক্লিপবোর্ডে থাকা ছবিগুলোর জন্য শর্তসাপেক্ষে প্রতিটি type বা types ফিল্ড পরীক্ষা করতে পারেন:

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
      }
    }
  }
});

আরও পড়ুন

  • MDN-এ ক্লিপবোর্ড এপিআই
  • web.dev-এ ক্লিপবোর্ড অ্যাক্সেস আনব্লক করা হচ্ছে

ডেমো

এইচটিএমএল 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to paste images</title>
  </head>
  <body>
    <h1>How to paste images</h1>
    <p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
      (for other operating systems) to paste images anywhere in this page.
    </p>
  </body>
</html>

সিএসএস 


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

জেএস 


        document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
      appendImage(blob);
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
        appendImage(blob);
      }
    }
  }
});

const appendImage = (blob) => {
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.append(img);
};