نحوه کپی کردن تصاویر

توماس اشتاینر

بسیاری از مرورگرهای مدرن از کپی کردن تصاویر در کلیپ بورد با فرمت‌های PNG و SVG پشتیبانی می‌کنند. فرمت‌های دیگر به دلایل امنیتی هنوز پشتیبانی نمی‌شوند.

روش مدرن

استفاده از API کلیپ‌بورد ناهمگام

متد Clipboard.write() آرایه‌ای از اشیاء ClipboardItem را می‌گیرد و یک Promise برمی‌گرداند که وقتی تصویر با موفقیت در کلیپ‌بورد نوشته شود، اجرا می‌شود. Clipboard.write() فقط می‌تواند از شیء window که فوکوس دارد استفاده شود.

Browser Support

  • کروم: ۷۶.
  • لبه: ۷۹.
  • فایرفاکس: ۱۲۷.
  • سافاری: ۱۳.۱.

Source

روش کلاسیک

استفاده از navigator.clipboard.writeText()

اگرچه هنوز همه مرورگرها navigator.clipboard.write() برای داده‌های دودویی پشتیبانی نمی‌کنند، اما همه آنها navigator.clipboard.writeText() پشتیبانی می‌کنند. اگر می‌خواهید یک تصویر SVG را کپی کنید، به جای کپی کردن خود تصویر، می‌توانید کد منبع SVG را کپی کنید. برای تصاویر PNG، متأسفانه شانسی ندارید.

Browser Support

  • کروم: ۶۶.
  • لبه: ۷۹.
  • فایرفاکس: ۶۳.
  • سافاری: ۱۳.۱.

Source

بهبود تدریجی 

const button = document.querySelector('button');
const img = document.querySelector('img');

button.addEventListener('click', async () => {
  const responsePromise = fetch(img.src);
  try {
    if ('write' in navigator.clipboard) {
      await navigator.clipboard.write([
        new ClipboardItem({
          'image/svg+xml': new Promise(async (resolve) => {
            const blob = await responsePromise.then(response => response.blob());
            resolve(blob);
          }),
        }),
      ]);
      // Image copied as image.
    } else {
      const text = await responsePromise.then(response => response.text());
      await navigator.clipboard.writeText(text);
      // Image copied as source code.
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

مطالعه بیشتر

نسخه آزمایشی

اچ‌تی‌ام‌ال 

<!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 copy images</title>
  </head>
  <body>
    <h1>How to copy images</h1>
    <img src="assets/fugu.svg" alt="Fugu fish." width="128" height="128">
    <button type="button">Copy</button>
  </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;
}

جی‌اس 


        const button = document.querySelector('button');
const img = document.querySelector('img');

button.addEventListener('click', async () => {
  const responsePromise = fetch(img.src);

  try {
    if ('write' in navigator.clipboard) {
      await navigator.clipboard.write([
        new ClipboardItem({
          'image/svg+xml': new Promise(async (resolve) => {
            const blob = await responsePromise.then(response => response.blob());
            resolve(blob);
          }),
        }),
      ]);
      // Image copied as image.
    } else {
      const text = await responsePromise.then(response => response.text());
      await navigator.clipboard.writeText(text);
      // Image copied as source code.
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});