كيفية نسخ الصور

توماس شتاينر

تتيح العديد من المتصفّحات الحديثة نسخ الصور إلى الحافظة بالتنسيقَين PNG وSVG. لا تتوفر تنسيقات أخرى حتى الآن لأسباب أمنية.

الطريقة الحديثة

استخدام Async Clipboard API

تأخذ الطريقة Clipboard.write() صفيفًا من عناصر ClipboardItem وتعرض وعدًا يتم حله عند كتابة الصورة بنجاح في الحافظة. لا يمكن استخدام "Clipboard.write()" إلا من كائن window الذي يتم التركيز عليه.

التوافق مع المتصفح

  • 66
  • 79
  • 13

المصدر

الطريقة الكلاسيكية

جارٍ استخدام navigator.clipboard.writeText()

على الرغم من أنّ بعض المتصفّحات لا تتيح استخدام navigator.clipboard.write() للبيانات الثنائية بعد، إلا أنّها تتيح جميعها استخدام navigator.clipboard.writeText(). إذا كنت ترغب في نسخ صورة SVG، بدلاً من نسخ الصورة نفسها، يمكنك نسخ رمز مصدر SVG. بالنسبة إلى صور PNG، لم يحالفك الحظ.

التوافق مع المتصفح

  • 66
  • 79
  • 63
  • 13

المصدر

التحسين التدريجي

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);
  }
});

قراءات إضافية

الإصدار التجريبي

HTML

<!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>

CSS


        :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;
}

JS


        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);
  }
});