La interfaz Clipboard de la API de Async Clipboard proporciona acceso de lectura y escritura al contenido del portapapeles del sistema. Esto permite que una aplicación web implemente funciones de cortar, copiar y pegar. Puedes pegar datos del portapapeles en una aplicación llamando al método read() y copiar los datos en el portapapeles con el método write().
Además de los formatos personalizados web, las imágenes en formato Portable Network Graphics (PNG), el HTML limpio y los formatos personalizados web, la API de Async Clipboard ahora también admite la copia y el pegado de imágenes SVG, lo que significa que finalmente puedes interactuar con software de edición de imágenes que se ocupa de los SVG de forma más natural copiando y pegando imágenes SVG como imágenes en lugar de trabajar con como texto.
Compatibilidad con SVG de detección de funciones
Detecta la compatibilidad con imágenes SVG (y cualquier otro tipo de MIME) llamando al método estático ClipboardItem.supports() y pasándole el tipo de MIME deseado.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
Copiar una imagen SVG
Para copiar una imagen SVG, propaga ClipboardItem con un objeto. El BLOB con los datos de la imagen SVG es el valor y el tipo de BLOB (es decir, 'image/svg+xml' en este caso) como su clave.
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);
}
});
Pegar una imagen SVG
Para pegar una imagen SVG, lee el ClipboardItem desde el portapapeles y obtén el tipo deseado (es decir, 'image/svg+xml' en este caso) con el método getType(). Esto muestra un BLOB que, una vez convertido en una URL de BLOB, puedes asignar al atributo src de 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;
});
Limpieza
SVG es un formato potente que, por ejemplo, permite secuencias de comandos incorporadas. Esto puede ser peligroso cuando el usuario pega contenido de fuentes desconocidas, por lo que el navegador ejecuta un paso de limpieza. Cuando se copian los datos, la API de Async Clipboard produce un documento SVG con formato correcto y, luego, lo escribe en el portapapeles. Cuando se pegan los datos, el analizador de fragmentos produce un fragmento SVG estrictamente procesado. Por lo tanto, antes de la operación de pegado, los atributos del controlador del evento onclick permanecen allí, pero se quitan después de pegarlos.
Demostración
Explora cómo copiar y pegar SVG en la demostración en Glitch. Consulta el código fuente para ver cómo funciona. Asegúrate de hacer clic en cualquiera de los círculos antes y después de copiar y pegar. Después de pegarlos, se quitan los atributos del controlador de eventos onclick potencialmente peligrosos.
Vínculos relacionados
- Software de producción con esta función:
- Entrada de ChromeStatus
- Intención de enviar
- Error de Chromium
- Posición de los estándares de WebKit
- Posición de los estándares de Mozilla
Agradecimientos
El equipo de Microsoft Edge implementó la compatibilidad con SVG para la API de Async Clipboard en Chromium. Rachel Andrew y Anupam Snigdha revisaron esta publicación.