Resimleri kopyalama

Thomas Steiner'ın yer aldığı daha fazla içerik
Thomas Steiner
Twitter GitHub Glitch Ana Sayfa

Birçok modern tarayıcı, resimlerin panoya PNG ve SVG biçimlerinde kopyalanmasını desteklemektedir. Diğer biçimler güvenlik nedeniyle henüz desteklenmemektedir.

Modern yöntem

Async Clipboard API'yi kullanma

Clipboard.write() yöntemi, bir ClipboardItem nesne dizisi alır ve resim panoya başarıyla yazıldığında çözümlenen bir Promise döndürür. Clipboard.write(), yalnızca odağın bulunduğu window nesnesinden kullanılabilir.

Tarayıcı Desteği

  • 66
  • 79
  • 13.1

Kaynak

Klasik yöntem

navigator.clipboard.writeText() kullanılıyor

Tüm tarayıcılar ikili program verileri için navigator.clipboard.write() desteği henüz sunmasa da hepsi navigator.clipboard.writeText() özelliğini desteklemektedir. Bir SVG resmini kopyalamak istiyorsanız resmin kendisini kopyalamak yerine SVG kaynak kodunu kopyalayabilirsiniz. PNG resimleri için maalesef şansınız yoktur.

Tarayıcı Desteği

  • 66
  • 79
  • 63
  • 13.1

Kaynak

Progresif geliştirme

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

Daha fazla bilgi

Demo

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