تتيح العديد من المتصفّحات الحديثة نسخ الصور إلى الحافظة بالتنسيقَين PNG وSVG. لا تتوفر تنسيقات أخرى حتى الآن لأسباب أمنية.
الطريقة الحديثة
استخدام Async Clipboard API
تأخذ الطريقة Clipboard.write()
صفيفًا من عناصر ClipboardItem
وتعرض وعدًا يتم حله عند كتابة الصورة بنجاح في الحافظة. لا يمكن استخدام "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);
}
});