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