بسیاری از مرورگرهای مدرن از کپی کردن تصاویر در کلیپ بورد با فرمت های PNG و SVG پشتیبانی می کنند. فرمت های دیگر به دلایل امنیتی هنوز پشتیبانی نمی شوند.
روش مدرن
با استفاده از Async Clipboard API
متد Clipboard.write()
آرایه ای از اشیاء ClipboardItem
را می گیرد و یک Promise برمی گرداند که زمانی که تصویر با موفقیت در کلیپ بورد نوشته شد حل می شود. Clipboard.write()
فقط می توان از شی window
که فوکوس دارد استفاده کرد.
روش کلاسیک
استفاده از navigator.clipboard.writeText()
در حالی که هنوز همه مرورگرها از navigator.clipboard.write()
برای داده های باینری پشتیبانی نمی کنند، همه آنها از navigator.clipboard.writeText()
پشتیبانی می کنند. اگر می خواهید یک تصویر SVG را کپی کنید، به جای کپی کردن خود تصویر، می توانید کد منبع SVG را کپی کنید. برای تصاویر PNG، متاسفانه شما شانسی ندارید.
افزایش پیشرونده
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);
}
});
بیشتر خواندن
نسخه ی نمایشی
<!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>
: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;
}
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);
}
});