تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

Thomas Steiner

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

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

استخدام Async Clipboard API

يأخذ الإجراء Clipboard.write() صفيفًا من كائنات ClipboardItem ويعرض وعدًا يتم تنفيذه عند كتابة الصورة بنجاح في الحافظة. لا يمكن استخدام 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);
  }
});

محتوى إضافي للقراءة

إزالة حظر الوصول إلى الحافظة

عرض توضيحي

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

كيفية نسخ الصور تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.