La
interface Clipboard
de
L'API Async Clipboard fournit un accès en lecture et en écriture au contenu des
le presse-papiers du système. Cela permet à une application web
d'implémenter les fonctions cut, copy et
coller les caractéristiques. Vous pouvez coller des données du presse-papiers dans une application en
en appelant la méthode
la méthode read()
,
et copier des données dans le presse-papiers en appelant la méthode
write()
.
Outre text,
images dans Portable Network
graphiques (PNG), nettoyés et
HTML non rectifié
Les formats Web personnalisés,
L'API Async Clipboard permet désormais de copier et de coller des images SVG, ce qui
Cela signifie que vous pouvez enfin interagir avec un logiciel d'édition d'images compatible avec les SVG.
plus naturellement en copiant et collant les images SVG en tant qu'images plutôt que sous forme de texte ou
à l'aide de solutions de contournement du piratage.
Compatibilité avec la détection de fonctionnalités SVG
Détectez la compatibilité des images SVG (et de tout autre type MIME) en appelant la méthode
ClipboardItem.supports()
statique, en lui transmettant le type MIME souhaité.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
Copier une image SVG
Copiez une image SVG en renseignant les champs
ClipboardItem
avec
un objet. Le blob contenant les données d'image SVG correspond à la valeur et au type du blob.
(c'est-à-dire 'image/svg+xml'
dans ce cas) comme clé.
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);
}
});
Coller une image SVG
Pour coller une image SVG, lisez à nouveau le ClipboardItem
depuis le presse-papiers, puis
obtenir le type souhaité (c'est-à-dire 'image/svg+xml'
dans ce cas) avec le
getType()
. Cela renvoie un blob qui, une fois converti en URL d'objet blob,
que vous pouvez attribuer à l'attribut src
d'un <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;
});
Désinfection
Le format SVG est un format puissant qui, par exemple, permet d'intégrer des scripts. Il peut s'agir
dangereux lorsque l'utilisateur colle du contenu provenant de sources inconnues. Par conséquent,
navigateur exécute une étape de nettoyage. Une fois les données copiées, l'API Async Clipboard
crée un document SVG
bien formé, puis l'écrit dans le presse-papiers. Quand ?
les données sont collées, le fragment génère un fragment SVG soumis à un traitement strict
de votre analyseur. Par conséquent, avant l'opération de collage, le gestionnaire d'événements onclick
sont toujours présents, mais lors du collage, ils sont supprimés.
Démo
Découvrez comment copier et coller des SVG dans l'application
demo sur Glitch. Consultez le
code source
pour en savoir plus. Essayez de cliquer sur l'un des cercles avant et après
copier et coller. Une fois l'opération "coller", l'événement onclick
potentiellement dangereux
les attributs de gestionnaire sont supprimés.
Liens associés
- Logiciels de production utilisant cette fonctionnalité: <ph type="x-smartling-placeholder">
- Entrée ChromeStatus
- Intention d'expédition
- Bug Chromium
- Position des normes WebKit
- Position des normes Mozilla Standards
Remerciements
La compatibilité SVG pour l'API Async Clipboard dans Chromium a été mise en œuvre par la équipe Microsoft Edge. Ce post a été examiné par Rachel Andrew et Anupam Snigdha.