איך מעתיקים תמונות

תומאס שטיינר
תומאס סטיינר
Twitter GitHub Glitch דף הבית

דפדפנים מודרניים רבים תומכים בהעתקת תמונות ללוח בפורמטים PNG ו-SVG. מטעמי אבטחה, עדיין אין תמיכה בפורמטים אחרים.

הדרך המודרנית

באמצעות Async Clipboard API

השיטה Clipboard.write() לוקחת מערך של אובייקטים מסוג ClipboardItem ומחזירה הבטחה שקובעת מתי התמונה נכתבת בהצלחה בלוח. ניתן להשתמש ברכיב Clipboard.write() רק מתוך אובייקט window שבו יש מיקוד.

תמיכה בדפדפן

  • 66
  • 79
  • 13.1

מקור

הדרך הקלאסית

navigator.clipboard.writeText() בשימוש

לא כל הדפדפנים תומכים בנתונים בינאריים ב-navigator.clipboard.write() אבל כולם תומכים ב-navigator.clipboard.writeText(). אם אתם רוצים להעתיק תמונת SVG, במקום להעתיק את התמונה עצמה, תוכלו להעתיק את קוד המקור של ה-SVG. לתמונות PNG, לצערנו, אין לכם מזל.

תמיכה בדפדפן

  • 66
  • 79
  • 63
  • 13.1

מקור

שיפור הדרגתי

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