Async Clipboard API'nin Clipboard
arayüzü, sistem panosunun içeriğine okuma ve yazma erişimi sağlar. Bu, bir web uygulamasının kesme, kopyalama ve yapıştırma özelliklerini uygulamasına olanak tanır. read()
yöntemini çağırarak panodaki verileri bir uygulamaya yapıştırabilir, write()
yöntemini çağırarak da verileri panoya kopyalayabilirsiniz.
Async Clipboard API, metin, Portable Network Graphics (PNG) biçimindeki resimler, temizlenmiş ve temizlenmemiş HTML ile web özel biçimlerinin yanı sıra artık SVG resimlerinin kopyalanıp yapıştırılmasını da destekliyor. Bu sayede, SVG resimlerini metin olarak değil de resim olarak kopyalayıp yapıştırarak veya geçici çözümler kullanarak SVG'lerle çalışan resim düzenleme yazılımlarıyla daha doğal bir şekilde etkileşim kurabilirsiniz.
SVG desteğini algılama özelliği
İstenen MIME türünü ileterek statik ClipboardItem.supports()
yöntemini çağırarak SVG resimlerinin (ve diğer MIME türlerinin) desteğini algılayın.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
SVG resim kopyalama
ClipboardItem
öğesini bir nesneyle doldurarak SVG resmini kopyalayın. SVG resim verilerini içeren blob, değer ve blob'un türü (bu durumda 'image/svg+xml'
) anahtar olarak kullanılır.
copyButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
try {
const blob = await fetch(img.src).then((response) => response.blob());
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob,
}),
]);
} catch (err) {
console.error(err.name, err.message);
alert(err.message);
}
});
SVG resmi yapıştırma
SVG resmini yapıştırmak için ClipboardItem
öğesini panodan okuyun ve getType()
yöntemiyle istediğiniz türü (bu örnekte 'image/svg+xml'
) alın. Bu, blob URL'sine dönüştürüldüğünde <img>
öğesinin src
özelliğine atanabilen bir blob döndürür.
pasteButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
const [clipboardItem] = await navigator.clipboard.read();
const svgBlob = await clipboardItem.getType('image/svg+xml');
if (!svgBlob) {
alert('No SVG in the clipboard.');
return;
}
const image = document.createElement('img');
const blobURL = URL.createObjectURL(svgBlob);
image.addEventListener('load', () => {
URL.revokeObjectURL(blobURL);
});
image.src = blobURL;
});
Temizleme
SVG, örneğin yerleştirilmiş komut dosyalarına izin veren güçlü bir biçimdir. Bu durum, kullanıcı bilinmeyen kaynaklardan içerik yapıştırdığında tehlikeli olabilir. Bu nedenle tarayıcı, temizleme adımı uygular. Veriler kopyalandığında Async Clipboard API, iyi biçimlendirilmiş bir SVG belgesi oluşturur ve bunu panoya yazar. Veriler yapıştırıldığında, parça ayrıştırıcı tarafından kesinlikle işlenmiş bir SVG parçası oluşturulur. Bu nedenle, yapıştırma işleminden önce onclick
etkinlik işleyici özellikleri hala oradadır ancak yapıştırma işleminden sonra kaldırılır.

Demo
Demoda SVG'leri kopyalayıp yapıştırmayı deneyin. İşleyiş şeklini görmek için kaynak kodunu görüntüleyin. Kopyalayıp yapıştırmadan önce ve sonra dairelerden herhangi birini tıklamayı deneyin. Yapıştırma işleminden sonra, tehlikeli olabilecek onclick
event
handler özellikleri kaldırılır.
İlgili bağlantılar
- Bu özelliği kullanan üretim yazılımı:
- ChromeStatus girişi
- Kargoya verme amacı
- Chromium hatası
- WebKit Standartları konumu
- Mozilla Standartları konumu
Teşekkür
Chromium'daki Async Clipboard API için SVG desteği, Microsoft Edge ekibi tarafından uygulandı. Bu yayın, Rachel Andrew ve Anupam Snigdha tarafından incelendi.