A
interface Clipboard
da
API Async Clipboard fornece acesso de leitura e gravação ao conteúdo da
área de transferência do sistema. Isso permite que um aplicativo da Web implemente recursos de recortar, copiar e colar. É possível colar dados da área de transferência em um aplicativo
chamando o
método read()
e copiar dados para a área de transferência chamando o
método write()
.
Além de texto,
imagens no formato Portable Network
Graphics (PNG), HTML limpo e
não sanitizado e
formatos personalizados para a Web, a
API Async Clipboard agora também oferece suporte para copiar e colar imagens SVG, o que
significa que você pode finalmente interagir com softwares de edição de imagens que lidam com SVGs
de forma mais natural copiando e colando imagens SVG como imagens em vez de como texto ou
usando hacky.
Suporte ao SVG de detecção de recursos
Detecte o suporte a imagens SVG (e qualquer outro tipo MIME) chamando o
método ClipboardItem.supports()
estático e transmitindo o tipo MIME pretendido.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
Copiar uma imagem SVG
Copie uma imagem SVG preenchendo o
ClipboardItem
com
um objeto. O blob com os dados da imagem SVG é o valor e o tipo do blob (ou seja, 'image/svg+xml'
, neste caso) como chave.
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);
}
});
Colar uma imagem SVG
Para colar uma imagem SVG, leia o ClipboardItem
da área de transferência e
confira o tipo pretendido (ou seja, 'image/svg+xml'
, neste caso) com o
método getType()
. Isso retorna um blob que, depois de convertido em um URL de blob,
pode ser atribuído ao atributo src
de um <img>
.
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;
});
Limpeza
O SVG é um formato avançado que, por exemplo, permite scripts incorporados. Isso pode ser
perigoso quando o usuário cola conteúdo de fontes desconhecidas, então o
navegador executa uma etapa de limpeza. Quando os dados são copiados, a API Async Clipboard
produz um documento SVG bem formado e o grava na área de transferência. Quando
os dados são colados, um fragmento SVG estritamente processado é produzido pelo analisador
de fragmentos. Portanto, antes da operação de colagem, os atributos do manipulador de eventos onclick
ainda estão lá, mas após a colagem, eles são removidos.
![App Clipboard Viewer no macOS inspecionando o conteúdo da área de transferência. Ele mostra que os atributos do listener de eventos "onclick" no SVG ainda estão presentes.](https://developer.chrome.com/static/blog/svg-support-for-async-clipboard-api/svgsupportfort--jlkftlu5qa.png?authuser=6&hl=pt)
Demonstração
Aprenda a copiar e colar SVGs na
demonstração do Glitch. Veja o código-fonte para ver como ele funciona. Clique em qualquer um dos círculos antes e depois
de copiar e colar. Depois de colar, os atributos potencialmente perigosos do manipulador de eventos onclick
serão removidos.
Links relacionados
- Software de produção que usa esse recurso:
- Entrada ChromeStatus
- Intenção de envio
- Bug do Chromium
- Posição dos Padrões do WebKit
- Posição no Mozilla Standard (em inglês)
Agradecimentos
O suporte ao SVG para a API Async Clipboard no Chromium foi implementado pela equipe do Microsoft Edge. Esta postagem foi revisada por Rachel Andrew e Anupam Snigdha.