Resimleri yapıştırma

Harry Theodoulou

Modern yöntem

Async Clipboard API'yi kullanma

Kullanıcının panosundaki resimleri programatik olarak (ör. bir düğme tıklandıktan sonra) okumak için Async Clipboard API'nin read() yöntemini kullanabilirsiniz. Pano içeriğini okuma izni henüz verilmediyse navigator.clipboard.read() yöntemi ilk kez çağrıldığında bu izin istenir.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      const imageTypes = clipboardItem.types.find(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        const blob = await clipboardItem.getType(imageType);
        // Do something with the image blob.
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 127.
  • Safari: 13.1.

Source

Klasik yöntem

paste etkinliğini dinleyin

Resimleri yapıştırmanın klasik yolu, Clipboard API'yi (senkron) kullanmaktır. Bu API, Document: paste event içindeki clipboardData alanına erişmenizi sağlar. Ancak bu yöntemin sınırlamaları vardır. Örneğin, senkronize olduğu için büyük miktarda veri yapıştırmak sayfayı engelleyebilir.

document.addEventListener('paste', async (e) => {
  e.preventDefault();

  for (const clipboardItem of e.clipboardData.files) {
    if (clipboardItem.type.startsWith('image/')) {
      // Do something with the image file.
    }
  }
});

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 13.1.

Source

Progresif geliştirme

Async Clipboard API'yi desteklemeyen tarayıcılarda, kullanıcının panosuna programatik olarak (örneğin, bir düğme tıklamasıyla) erişmek mümkün değildir. Bu nedenle, bir paste etkinliğinde kullanıcının panosuna erişmek için Async Clipboard API'yi kullanabilir ve (senkron) Clipboard API'ye geri dönebilirsiniz.

navigator.clipboard.read kaynağından gelen ClipboardItem nesnelerinde dizi olan bir types alanı, event.clipboardData.files kaynağından gelen File nesnelerinde ise dize olan bir type alanı bulunur. Pano içeriğindeki resimler için type veya types alanlarının her birini koşullu olarak kontrol edebilirsiniz:

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
      }
    }
  }
});

Daha fazla bilgi

  • MDN'deki Clipboard API
  • web.dev'de pano erişiminin engellemesini kaldırma

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 paste images</title>
  </head>
  <body>
    <h1>How to paste images</h1>
    <p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
      (for other operating systems) to paste images anywhere in this page.
    </p>
  </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


        document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
      appendImage(blob);
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
        appendImage(blob);
      }
    }
  }
});

const appendImage = (blob) => {
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.append(img);
};